<html>
<head>
<title>What is Scope and Scope Inheritance?</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var parentApp = angular.module("myParentApp", []);
parentApp.controller("MyParentController", function($scope) {
$scope.ParentName = 'Parent';
$scope.Age = 50;
});
parentApp.controller("MyChild1Controller", function($scope) {
$scope.child1Name = 'Child-1';
$scope.Age = 10;
$scope.gender = 'M';
});
parentApp.controller("MyChild2Controller", function($scope) {
$scope.child2Name = 'Child-2';
$scope.Age = 4;
$scope.gender = 'F';
});
</script>
</head>
<body ng-app="myParentApp">
<h2>Scope Inheritance?</h2>
<div ng-controller="MyParentController">
<p>{{ParentName}} <br/>{{Age}}
<div ng-controller="MyChild1Controller">
<p>{{child1Name}}
<br/>{{Age}}</p>
</div>
<div ng-controller="MyChild2Controller">
<p>{{child2Name}}
<br/>{{Age}}</p>
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */