Here is an example of HTML:
<div ng-repeat="user in controller.users">
<p>{{user.name}}</p>
<button ng-click="controller.deleteUser(user)" value="delete"></button>
</div>
Next, we have the controller code:
vm = this;
vm.users;
activate();
function activate() {
service.getUserList().then(function(userList){
vm.users = userList;
});
}
function deleteUser() {
service.deleteUser(user).then(function(){
activate();
});
}
Finally, here is the service code:
function deleteUser(user) {
var index = userList.indexOf(user);
if (index !== -1) userList.splice(index, 1);
return new Promise((resolve, reject) => {
resolve(userList);
});
}
After deleting a user, the service is called and upon completion, it activates the activate() function. This updates vm.users, but not immediately in the UI. Strangely, after clicking delete a second time, it does update correctly!
What could be causing this delayed update?