AngularJS watch not working AngularJS watch not working angularjs angularjs

AngularJS watch not working


Have you tried adding true, as bellow?

$scope.$watch('searchKeyword', function (val) { /* your logic here */                    }, true);

If you're curious about what the true is, here's the function signature from the docs:

$watch(watchExpression, listener, [objectEquality]);

When objectEquality == true, inequality of the watchExpression is determined according to the angular.equals function. To save the value of the object for later comparison, the angular.copy function is used. This therefore means that watching complex objects will have adverse memory and performance implications.

So apparently the significant thing is that it checks the equality of the old value and new value in a different way. I could see this being necessary if (correct me if I'm wrong) the value you're watching is, e.g., an array as opposed to a string.


The watch has to be an attribute of the object, not the object itself, see the example here https://docs.angularjs.org/api/ng/type/$rootScope.Scope on how to add a watch, and the use of the model here https://docs.angularjs.org/api/ng/directive/input. You could try this (I have not tested it)

data-ng-model="search.keyword"

and in your controller:

$scope.search = {}

...

$scope.$watch('search.keyword', ... 


Just to add to the list of possible solutions:

While using forms:

Using ng-pattern will supress the call to $watch unless and until the input is validated by ng-pattern.

So just in case, if anyone is using ng-pattern, try $watch after removing ng-pattern.

For more reading:

Angular.js - ng-change not firing when ng-pattern is $invalid