Angular JS: get ng-model on ng-change

Question

I have the following HTML

<select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select>

That is beeing fed by the following object with a list of countries

$scope.countries = [{name:Afeganistão, country:AF}, {name:África do Sul, country:ZA}, name:Albânia, country:AL}, {name:Alemanha, country:DE}, {name:Andorra, country:AD} ...];

When I change my dropdown value I was expecting my model ($scope.country) to be updated, inside filterByCountry function, but it isn't. What am I missing here?

Answer 1

The ng-change handler is fired before the ng-model is actually updated. If you want filterByCountry to be fired every time $scope.country changes (rather than just when the dropdown changes), you should use the following instead:

$scope.$watch('country', filterByCountry);

I always find it more useful to react to changes in my $scope rather than DOM events when possible.

Answer 2

Just for anyone else coming here, ng-change is actually called after the model value has been set.

Why?
Let's see when is it called. From the angular source code, ng-change is just an attribute directive with this directive definition object (DDO).

{
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      ctrl.$viewChangeListeners.push(function() {
        scope.$eval(attr.ngChange);
      });
    }
}

From this we see that the ng-change directive is very simple. All that ng-change='<expr>' does is add a function to the end of $viewChangeListeners that evaluates <expr> via $scope.$eval.

OK ... so when are the ViewChangeListeners called?

Well, if we look at the documentation for ngModel.NgModelController:

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.

So the viewChangeListener for the ngChange will be invoked after the value is applied to $modelValue. Hence the callback will be invoked after the model as been set.

Also note that this behavior is the same in all versions of angular. The definition for ng-change hasn't changed since v1.2.