// NOTE: ng-app="plunker" + AngularUI module dependency
var app = angular.module('plunker', ['ui']);


app.controller('GrandparentCtrl', function($scope) {
  $scope.name = 'Grandma Sue';
});

app.controller('ParentCtrl', function($scope) {
  $scope.name = 'Mother Goose';
});

app.controller('ChildCtrl', function($scope) {
  $scope.name = 'Child Yoshi';
});
<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
  <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script>
  <script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="GrandparentCtrl">

  <h5>Controller Inheritance</h5>
  <p>Here is an example of controller inheritence which is quite simple in angular if you follow this convention seen here</p>
  <div ng-controller="ParentCtrl">  
    <div ng-controller="ChildCtrl">
      <h6>There is an undocumented method on $scope -> $parent</h6>    
      <pre>alert($scope.$parent.name)</pre>

      <div><b>Grandparent name:</b> {{$parent.$parent.name}}</div>
      <div><b>Parent name:</b> {{$parent.name}}</div>
      <div><b>My name:</b> {{name}}</div>
    </div>
  </div>
</body>
</html>
/* Put your css in here */
.notes{
  font-family: monospace;
}
.notes li { list-style: none;}