Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
 <script src="
  https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
 </script>
</head>
<body ng-app="testApp">
<h1>AngularJS RootScope Example</h1>
    <div ng-controller="parentController">
        Controller Name: {{controllerName}} <br/>
        Message: {{message}} <br/><br/>
        <div ng-controller="childController">
            Controller Name: {{controllerName}} <br/>
            Message: {{message}} <br/><br/>
        </div>
    </div>
    <div  ng-controller="siblingController">
        Controller Name: {{controllerName}} <br/>
        Message: {{message}} <br/>
    </div>
    <script>
        var ngApp = angular.module('testApp', []);
​
        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) {
            $scope.controllerName = "siblingController";
        });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x