<!doctype html>
<html ng-app="plunker" >
  <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>
<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>
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 */