AngularJS Tutorial - Hierarchical Controllers

The following code shows how to create. Hierarchical Controllers. And use it in two level elements.

Example


<!DOCTYPE html>
<html  ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head><!-- w w w.ja v  a 2 s.c  o  m-->
<body ng-app>
  <div ng-controller="Parent">
     Data length: {{ data.length }}<br>
     <div ng-controller="Child">
     </div>
  </div>
<script type='text/javascript'>
function Parent($scope) {
    $scope.data = [];
}
function Child($scope) {
    $scope.data.push({id:1});
    $scope.data.push({id:2});
}
</script>
</body>
</html>

The code above is rendered as follows: