DaViDa DaViDa - 4 months ago 50x
AngularJS Question

ng-change not working with asynchronous controller logic

So I have a controller with a couple of asynchronous .then functions. In the end I catch them all with a $q.all() function to continue my synchronous work. Now I have a select with dynamic options:

<select ng-model="data.selectedUser" ng-change="changeList()" ng-options="user as user.firstname + ' ' + user.lastname for user in users">
<option value="">Select a user...</option>

With ng-change I want to get the selected user in my controller, so I call changeList(). In the changeList function I do some simple alerts which do not trigger. When I do the test alert first in the controller it even freezes at choosing an option.

In my $q.all() function:

$q.all(promises).then(function () {
users = UserService.getUsers();
$scope.users = users;
$scope.data.selectedUser = {};

$scope.changeList = function () {
var chosenUser = $scope.data.selectedUser;

}, function () {

The alerts do nothing, I also tried putting the changeList function out of the $q.all function in the bottom of the controller. What am I doing wrong?

user is already defined and all of that is working. It is purely about why the ng-change is not working. It is also tested without emptying the selectedUser scope first.


The it does not look like ng-change works on a select. You can have a look at this js-fiddle: http://jsfiddle.net/fc984j9b/

Instead of using the ng-change to fire the event I used a $watch on the ng-model of the select to trigger a function instead, in your case it would be:

$scope.$watch("data.selectedUser", function(){

I hope hat helps

Best Regards