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: