If you're curious about how ng-change works, it's important to note that this directive is triggered after the model value has been set.
But why is that?
To understand when ng-change is called, we can refer to the Angular source code where it is defined as an attribute directive with a specific directive definition object (DDO).
{
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
ctrl.$viewChangeListeners.push(function() {
scope.$eval(attr.ngChange);
});
}
}
This snippet reveals that the ng-change directive is quite straightforward. When using ng-change='<expr>', a function is added to the $viewChangeListeners array to evaluate <expr> using $scope.$eval.
So, when exactly are the ViewChangeListeners invoked?
Referring to the documentation for ngModel.NgModelController, it states:
the new value will be applied to $modelValue and then the expression specified in the ng-model attribute. Lastly, all the registered change listeners, in the $viewChangeListeners list, are called.
Therefore, the ViewChangeListener for the ngChange directive is activated after the value is assigned to $modelValue. Consequently, the callback is executed after the model has been set.
Additionally, it's worth noting that this behavior remains consistent across all versions of Angular. The definition for ng-change has remained unchanged since v1.2.