Controller inheritance


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.


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">
  <title>Simple App</title>
  <script src=""></script>
</head><!-- w  ww. java 2  s .c om-->

  <div ng-controller="ParentController">
    <div ng-controller="ChildController">
      <a href="#" ng-click="sayHello()">Say hello</a>
    {{ person }}

    var app = angular.module('myApp', []);

    app.controller('ParentController', function($scope) {
      $scope.person = { hasCellPhone: false };

    app.controller('ChildController', function($scope) {
      $scope.sayHello = function() {
        $ = "ChildName";
        $scope.person.hasCellPhone = true;
        $scope.person.duty = "coding";
        $scope.person.age = 23;


Click to view the demo


This nested structure of controllers resembles the DOM structure.

Home »
  AngularJS »
    AngularJS Tutorial »

Buildin Filters
Buildin Directives