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 Scope Inheritance Example.</h1>
    <div ng-controller="parentController">
        Controller Name: {{controllerName}}<br/>
        Message: {{message}}<br/>
        Color: {{color}}<br/>
        <div ng-controller="childController">
            Controller Name: {{controllerName}}<br/>
            Message: {{message}}<br/>
            Color: {{color}}<br/>
            Type: {{type}}<br/> 
        </div>
    </div>
  
    <script>
        var ngApp = angular.module('testApp', []);
​
        ngApp.controller('parentController', function ($scope) {
            $scope.controllerName = "parentController"; 
            $scope.message = "Hello world!"; 
            $scope.color = "Blue";
        });
      
       ngApp.controller('childController', function ($scope) {
            $scope.controllerName = "childController";
            $scope.color = "Blue";
            $scope.type = "Child";
        });
    </script>
</body>
</html>
Output

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

Dismiss x