controller vs $scope inheritance example

<!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>
    <p>When I finally get an exit, my new pool will be {{ShowArea(10)}} (not including the spa)</p>
  </div>
  
</body>
</html>

var app = angular.module('plunker', []);

function MainCtrl($scope) {
  $scope.firstName = 'Harvey';
  
  $scope.addOne = function(number){
    return number + 1;
  }
  
};
MainCtrl.prototype.calculateArea = function(radius){ return 3.142 * radius * radius ; };


function ChildCtrl($scope) {
  $scope.surname = 'Man..fren..gen..sen';
  $scope.multiplyByOneHundred = function(number){
    return number * 100;
  }
  
  //expose a method on the ChildCtrl $scope but use the utility method inherited from MainCtrl
	var ctrl = this;
	$scope.ShowArea = function(metres){
		return ctrl.calculateArea(metres) + 'square metres';
	};
};

//Force the ChildCtrl to inherit from the main MainCtrl (nothing to do with the inheritance of the $scope)
ChildCtrl.prototype = Object.create( MainCtrl.prototype );

/* Put your css in here */