Simple $scope.$watch not called?

Question

I have a simple table app which gets JSON data from a database. It passes the data via parameter to my app controller, which then filters the data. This works great. However, it is a lot of data (hundred thousand objects). I have search boxes that I use to try and filter the data, and when the search watch should be getting called (when someone types something in the search box), it doesn't. Am I missing something?

js:

var app = angular.module('SortingTables', ['ui.bootstrap']);
//Dependencies which are services, providers or factories must map to string types, which are then passed into the instance function

app.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

app.controller('Ctrl', function ($scope, filterFilter, dataTable) {
    $scope.currentPage = 1;
    $scope.itemsPerPage = 25;
    $scope.totalItems = 0;
    $scope.predicate = '';
    $scope.searchBuffer = {
        $: ''
    };
    $scope.filtered;
    //This function has sort of been abstracted...
    //The purpose of this function is to delay the update so the user gets a chance to finish typing before the filter is applied.
    //Newer versions of angularjs have the ng-model-options: debounce=100 but we can't use that since we have IE 8 on dev boxes


    $scope.$watch('searchBuffer', function (term) {
        console.log('The watch on searchBuffer was called');
        $scope.filtered = filterFilter(dataTable, term);
        $scope.totalItems = $scope.filtered.length;
    });

    $scope.pageChanged = function () {
        $scope.currentRow = $scope.currentPage * $scope.itemsPerPage - $scope.itemsPerPage;
    };
});

html

<div ng-app="Components" ng-controller="Ctrl">
    <hr/>
    <table class="table table-striped">
        <tr>
            <th><a href="" ng-click="predicate = '\'Technical Owner\''; reverse=!reverse">Technical Owner</a>
                <br />
                <input type="search" ng-model="searchBuffer['Technical Owner']">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Branch</a>
                <br />
                <input type="search" style="width: 40px" ng-model="searchBuffer.Branch">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Sub Pillar</a>
                <br />
                <input type="search" ng-model="searchBuffer['Sub Pillar']">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Path'; reverse=false">Path</a>
                <br />
                <input type="search" ng-model="searchBuffer.Path">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Name'; reverse=!reverse">Name</a>
                <br />
                <input type="search" ng-model="searchBuffer.Name">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Description'; reverse=!reverse">Description</a>
                <br />
                <input type="search" ng-model="searchBuffer.Description">
                </a>
            </th>
        </tr>
        <tr ng-repeat="ComponetOwner in filtered | startFrom:currentPage | orderBy:predicate:reverse | limitTo:itemsPerPage">
            <td>{{ComponetOwner["Technical Owner"]}}</td>
            <td>{{ComponetOwner.Branch}}</td>
            <td>{{ComponetOwner["Sub Pillar"]}}</td>
            <td>{{ComponetOwner.Path}}</td>
            <td>{{ComponetOwner.Name}}</td>
            <td>{{ComponetOwner.Description}}</td>
        </tr>
    </table>
    <pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
</div>

When I type something in the search box, $watch doesn't get called. What's going on?

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

searchBuffer is an object. The third optional argument of $watch needs to be set to 'true' for watching objects/arrays (that is for deep watching).

Read this: $watch an object

edited May 23 '17 at 12:05

Community

1
1

answered Jul 01 '14 at 19:30

Sid

7,511
2
28
41

Now I'm curious to see what happens when he watches 100,000+ rows – Mike Robinson Jul 01 '14 at 19:32
I imagine angular grids such as ng-grid have watches on each row but they start degrading as you go over 2000 rows. – Sid Jul 01 '14 at 19:35

score 0 · Answer 2 · answered Jul 01 '14 at 19:43

You can do $watchCollection which will watch all the objects within an object.

Not as deep as setting the third optional argument which is true for yout $watch function.

Here is a good blog about it: http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm

Simple $scope.$watch not called?

2 Answers2