0

I am trying to show a loading indicator whenever a user clicks the save button. When the button is clicked, the state changes successfully, but reverting back the value of the loading property on scope to the false state doesn't update the UI.

Is it something i'm doing wrong with scope properties, or is this a flaw with angular?

Here's my jsBin: http://jsbin.com/xafexorope/2/edit?html,output

LordZardeck
  • 7,953
  • 19
  • 62
  • 119

1 Answers1

2

The reason why it doesnt work is because Angular's internal dirty-checking loop is not fired. It's because you use a standard setTimeout. Instead of that, either manually call $scope.$apply() at the end of your setTimeout callback, or better, use the angular wrapper $timeout.

Here is your updated jsbin: http://jsbin.com/devuhovaxa/3/edit

Additionally here the docs for $timeout: https://docs.angularjs.org/api/ng/service/$timeout

zewa666
  • 2,593
  • 17
  • 20
  • In my actual application its in the callback for a UserApp.io ajax request, i just used a timeout so the example would work. That being said, I used `$scope.$apply` there, and it worked! Thanks! – LordZardeck Nov 14 '14 at 17:51
  • Any useful documentation you would recommend regarding this particular issue? Specifically the "dirty-checking" loop and the `$scope.$apply`? – LordZardeck Nov 14 '14 at 17:52
  • Not sure if I understand what exactly you are searching for but those posts are pretty nice: http://www.sitepoint.com/understanding-angulars-apply-digest/ and this one http://www.benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html – zewa666 Nov 14 '14 at 17:55