<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS $scope vs Controller Inheritance</title>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-controller="ChildCtrl">
<!--because the ChildCtrl's $scope inherits from its parent $scope,
properties and methods of both are available in my view-->
<p>Hello {{firstName}} {{surname}}!</p>
<p>Meaning of Life is {{addOne(41)}}.</p>
<p>Studies have shown {{multiplyByOneHundred(6/10)}}% of beginners are confused about inheritance.</p>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.firstName = 'Harvey';
$scope.addOne = function(number){
return number + 1;
}
});
app.controller('ChildCtrl', function($scope) {
$scope.surname = 'Man..fren..gen..sen';
$scope.multiplyByOneHundred = function(number){
return number * 100;
}
});
/* Put your css in here */