Angular $watch an object

code that shows that property change in $watched object doesn't trigger the $watch

by Kyrylo Slatin

HTML

<div ng-controller="ctrl">
    <table>
        <tr ng-repeat="item in data">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
    <p>second person</p>
    <p>
        <input ng-model="person1.name"/>
        <input ng-model="data[0].age"/>
    </p>
    {{person1}}
    <p>
        <button ng-click="change()">Set Person1.Age=43</button>
        <button ng-click="replace()">Person1 = new person1</button>
    </p>
    <h1>Changes to person1:</h1>
    <div id="messages"></div>

</div>

JavaScript

angular.module('app', []);
angular.module('app').controller('ctrl', function($scope, $rootScope){
    $scope.data = [{name: 'name', age: 32}, {name: 'name2', age: 12}];
    $scope.person1 = $scope.data[0];
    $scope.$watch('person1', function(newval, oldval){
        var d = document.getElementById('messages');
        d.innerHTML += JSON.stringify(newval) + '<br>';
    });
    $scope.change = function(){
        //$scope.data.push({name: 'John', age: 100});
        $scope.data[0].age = 43;
        $rootScope.nested = 100;
    };
    $scope.replace = function(){
        $scope.person1 = {name : 'New person', age: 100};
    }
});
angular.bootstrap(document, ['app']);