Chapter 7: Trimming down watched models

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <div ng-controller="FullCtrl" ng-repeat="item in items track by $index">
            <input ng-model="items[$index].num" />
        </div>
    </div>
    <hr />
    <div ng-controller="Ctrl">
        <div ng-controller="ReducedCtrl" ng-repeat="item in items track by $index">
            <input ng-model="items[$index].num" />
        </div>
    </div>
</div>

JavaScript

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
    console.clear();
    var hugeRandomArr = function() {
        var arr = [];
        for (var i=0; i<100000; i++) {
            arr.push(Math.random());
        }
        return arr;
    };
    
    // initialize array of huge objects with a
    // property that we would like to ignore
    $scope.items = [1,2,3,4,5].map(function(val) {
        return { 
            num: val,
            hugeArr: hugeRandomArr()
        };
    });
})
.controller('FullCtrl', function($scope, $log) {
    // this watcher will execute slowly
    $scope.$watch('items', function() {
        $log.log('full changed!');
    }, true);
})
.controller('ReducedCtrl', function($scope, $log) {
    // this watcher will execute relatively quickly
    $scope.$watch(
        function(scope) {
            return scope.items.map(function(item) { 
                return item.num;
            });
        }, 
        function(val) {
            $log.log('reduced changed!');
        }, 
        true
    );
})