Code Editor

Home

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<h1>AngularJS $rootScope Demo: </h1>
    <div ng-controller="parentController">
        Controller Name: {{controllerName}} <br />
        Message: {{message}} <br />
        <div style="margin:10px 0 10px 20px;" ng-controller="childController">
            Controller Name: {{controllerName}} <br />
            Message: {{message}} <br />
        </div>
    </div>
    <div  ng-controller="siblingController">
        Controller Name: {{controllerName}} <br />
        Message: {{message}} <br />
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);

ngApp.controller('parentController', function ($scope, $rootScope) {
            $scope.controllerName = "parentController";
            $rootScope.message = "Hello World!";
        });

ngApp.controller('childController', function ($scope) {
            $scope.controllerName = "childController";
        });

ngApp.controller('siblingController', function ($scope) {

});
    </script>
</body>
</html>

Result: