javascript - 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:Albania, 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.