<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body data-ng-app="demo">
    <h1>Scopes in AngularJS</h1>
    <div data-ng-controller="parentController">
      <div data-ng-controller="childController">
        <span>This is a demonstration of scopes</span>
        <div>
          Parent model : <span data-ng-bind="$parent.model.name"></span>
        </div>
        <div>
          Current model : <span data-ng-bind="model.name"></span>
        </div>
        <div>
          <button data-ng-click="updateModel()">Click me</button>
        </div>
      </div>
    </div>
  </body>

</html>

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

var parentController = ['$scope', function($scope) {
                           $scope.model = { id:1, name:'myParentModel' }; 
                        }];

var childController = ['$scope', function($scope) {
                          $scope.updateModel = function() {
                            $scope.model = { id:2, name:'myChildModel' };
                          };
                      }];
                      

app.controller('parentController', parentController);
app.controller('childController', childController);
/* Styles go here */