Controller inheritance
Description
By default, if AngularJS cannot find a property on a local scope it will check the parent scope and look for the property or method until it reaches the $rootScope.
Example
In the following code ChildController is the child of ParentController. The ParentController's $scope object is the parent of the ChildController's $scope object. We can reference data on the ParentController's $scope from the ChildController's $scope.
<!doctype html>
<html ng-app="myApp">
<head>
<title>Simple App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
</head><!-- w ww. java 2 s .c om-->
<body>
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a href="#" ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ParentController', function($scope) {
$scope.person = { hasCellPhone: false };
})
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = "ChildName";
$scope.person.hasCellPhone = true;
$scope.person.duty = "coding";
$scope.person.age = 23;
}
})
</script>
</body>
</html>
Note
This nested structure of controllers resembles the DOM structure.