Sharing data using rootscope

https://groups.google.com/d/msg/angular/-/7Z_6p5pFi2oJ

by dandoyon

HTML

<script src="http://docs.angularjs.org/angular-1.0.0rc12.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-controller="RootCtrl">
    
    <div ng-controller="SummaryCtrl">
        <h4>{{AllMyData.persons.length}} <small>Persons</small></h4>
        <h4>{{AllMyData.pets.length}} <small>Pets</small></h4>  
<button ng-click="replace()" >Replace Model Data</button>        
    </div>
    
    <div ng-controller="PersonCtrl"> 
        <ul>
            <li ng-repeat="p in AllMyData.persons">{{p}}</li>
        </ul>            
        <button ng-click="add()" >Add to Persons</button>
     </div>
    
    <div ng-controller="PetCtrl">        
        <ul>
            <li ng-repeat="p in AllMyData.pets">{{p}}</li>
        </ul>            
         <button ng-click="add()">Add to Pets</button>
     </div>

    <pre>    
    {{AllMyData|json}}
    </pre>
</div>

JavaScript

var rootScope = null;

function RootCtrl($rootScope) {
    rootScope = $rootScope;
    $rootScope.AllMyData = {
        persons: ['Jim', 'Jane', 'Heidi'],
        pets: ['Fido', 'Spot']
    }

    $rootScope.update = function(newPerson) {
        //NOW THIS METHOD'S CONTEXT IS ALWAYS AS IT WAS
        //NEVER CALLED FROM OUTSIDE OF ANGULAR
        $rootScope.AllMyData.persons.push(newPerson);
    }
}

function PersonCtrl($scope) {
    $scope.add = function() {
        $scope.AllMyData.persons.push('Another Person');
    }
}

function PetCtrl($scope) {
    $scope.add = function() {
        $scope.AllMyData.pets.push('Another Pet');
    }
}

function SummaryCtrl($rootScope) {
    $rootScope.replace = function() {
        $rootScope.AllMyData = {
            persons: ['Jim2', 'Jane2', 'Heidi2'],
            pets: ['Fido2', 'Spot2']
        }
    }
}

//simulating call from outside angular, for example polling website 
//for new data and updating when changes are received
setTimeout(function someUpdate() {
    //WHEN CALLING ANGULAR FROM THE OUTSIDE, ALWAYS WRAP
    //THE CONTEXT USING APPLY:
    rootScope.$apply(function() {
        //NOW WE ARE INSIDE ANGULAR
        rootScope.update('Just Random Person');
    });
    setTimeout(someUpdate, 4000);
}, 1000);