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

Question

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.

https://docs.angularjs.org/api/ng/directive/ngChange

"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.

Answer 1

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

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

            });

Answer 2

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) {
    // ...
});

Answer 3

You can use a watcher-function in your controller

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

Answer 4

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 class="value" type="text" ng-model="myVar" on-model-change="doSomething(myVar)"/>