ng - sharing $rootScope betw 2 ctrls

by mckennatim

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
  <div ng-app="myApp">
    
    <div ng-controller="myCtrl">
        <strong>myCtrl</strong>
        <br/>
        Set in RootScope: {{test}}
          <br/>
          Original Value: {{getOrig()}}
          <br/>
        <button ng-click='change()'>Change</button>
    </div>
      <br/><br/>
      <div ng-controller="myCtrl2">
        <strong>myCtrl2</strong>
        <br/>
          Set in RootScope: {{test}}
          <br/>
          Original Value: {{getOrig()}}
          <br/>
          <button ng-click='change()'>Change Value</button>
          <button ng-click='changeRs()'>Change RootScope's Value</button>
      </div>
    </div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
  $scope.change = function() {
        $scope.test = new Date();
    };
    
    $scope.getOrig = function() {
        return $rootScope.test;
    };
})
.controller('myCtrl2', function($scope, $rootScope) {
    $scope.change = function() {
        $scope.test = new Date();
    };
    
    $scope.changeRs = function() {
        $rootScope.test = new Date();
    };
    
    $scope.getOrig = function() {
        return $rootScope.test;
    };
});