Angular: Empty Fiddle

http://angularjs.org/

by Bretto

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<div ng-controller="MyCtrl">
    Obj: {{obj|json}}
    <button ng-click="test()">Mutate</button>
    <div>
    watch $scope.obj Called: {{watchCalled}}
    </div>
    <div>
    watch $scope.obj.counter Called: {{watchCountCalled}}
    </div>
    
        <div>
    watch JSON.stringify($scope.obj) Called: {{watchJSONCalled}}
    </div>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.obj={
        counter:0
    };
    
    $scope.watchCalled=0;
    $scope.watchCountCalled=0;
    $scope.watchJSONCalled=0;
    
    
    $scope.test = function(){
        $scope.obj.counter++;
    };
    
    $scope.$watch(function(){
        return $scope.obj;
    },function(obj){
        $scope.watchCalled++;
    }, true);
    
    $scope.$watch(function(){
        return $scope.obj.counter;
    },function(obj){
        $scope.watchCountCalled++;
    }, true);

    $scope.$watch(function(){
        return JSON.stringify($scope.obj);
    },function(obj){
        $scope.watchJSONCalled++;
    }, true);        
}