// 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;}