watching by reference

by alimills

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<div ng-controller="MyCtrl">
    arr: {{arr}}
    <button ng-click="swap()">swap</button>
    <div>
    default $watch on $scope.arr: {{watchDefaultCount}}
    </div>
    <div>
    $watch with true on $scope.arr: {{watchTrueCount}}
    </div>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.arr = [{a:'aye'}, {b:'bee'}];
    
    $scope.watchDefaultCount = 0;
    $scope.watchTrueCount = 0;
    
    $scope.swap = function(){
        var zero = $scope.arr[0];
        var one = $scope.arr[1];
        $scope.arr[0] = one;
        $scope.arr[1] = zero;
    };
    
    $scope.$watch(function(){
        return $scope.arr;
    },function(obj){
        $scope.watchDefaultCount++;
    });
    
    $scope.$watch(function(){
        return $scope.arr;
    },function(obj){
        $scope.watchTrueCount++;
    }, true);
}