Angular - ng-change not firing when ng-model is changed

The input is the following:

<input type="text" ng-model="repair.test" ng-change="action()" /> 

The action() is executed when I manually type and change the input. However if I change the repair.test value by some other function programmatically, it doesnt fire the ng-change's action. I have read the angular tutorial and it's probably the expected behavior.

"The expression is not evaluated when the value change is coming from the model." <- I need this too. How can I fire an action in controller, when the model changes in any way? (typing in input or by any other function)

Thanks for the help.

Edit:

The model value is actually the form.$valid, which has it's own Form controller around it (I think), that is why I used the action function to try to pass the value to the parent controller. So $scope.$watch at the moment doesn't work, only when it is initialised.

4 Answers

ngChange is just for the input, if you want to listen the model do like this

$scope.$watch('repair.test', function(newvalue,oldvalue) { }); 

The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.

It will not be evaluated:

• if the value returned from the $parsers transformation pipeline has not changed
• if the input has continued to be invalid since the model will stay null
• if the model is changed programmatically and not by a change to the input value

Try to create a watcher using $scope.$watch - $watch(watchExpression, listener, [objectEquality]);

Example

$scope.$watch('repair.test', function(newValue, oldValue) { // ... }); 

You can use a watcher-function in your controller

$scope.$watch('repair.test', function() { $scope.action(); }); 

Another solution would be to use a directive that watched the model for any changes instead of using ng-change.

app.directive('onModelChange', function($parse){ return { restrict: "A", require: "?ngModel", link: function(scope, elem, attrs, ctrl) { scope.$watch(attrs['ngModel'], function (newValue, oldValue) { if (typeof(newValue) === "undefined" || newValue == oldValue) { return; } var changeExpr = $parse(attrs['onModelChange']); if (changeExpr) { changeExpr(scope); } }); } }; }); 

Then you would use it like so:

<input type="text" ng-model="myVar" on-model-change="doSomething(myVar)"/>