Angular watchers and one-time binding

Uses external angular 1.3.6

by Kyrylo Slatin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<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()">Change</button>
    </p>

</div>

JavaScript

angular.module('app', []);
angular.module('app').controller('ctrl', function($scope){
    $scope.data = [{name: 'name', age: 32}, {name: 'name2', age: 12}];
    $scope.person1 = $scope.data[0];
    $scope.change = function(){
        //$scope.data.push({name: 'John', age: 100});
        $scope.data[0].age = 43;
    };
});
angular.bootstrap(document, ['app']);