In my controller, I am loading content using ajax and want a spinner to appear while it's loading. The code snippet is as follows:
<i class="fa fa-2x fa-spin fa-spinner" ng-show="isLoadingContent"></i>
Accompanied by the following JavaScript code:
$scope.isLoadingContent = true;
$q.all(promises).then(function (values) {
$scope.isLoadingContent = false;
// more code - display returned data
However, the spinner isn't appearing where I expect when I debug through the code.
$scope.isLoadingContent = true;
debugger; // the spinner doesn't show in UI
$q.all(promises).then(function (values) {
debugger; // the spinner finally shows up in UI at this point
$scope.isLoadingContent = false;
// more code - display returned data
Even after debugging, I'm unsure of what's happening and how the Event Loop and angular-cycle are playing a role in this situation.
If anyone can clarify why the spinner appears within the promise's method rather than where $scope.isLoadingContent is set, I would greatly appreciate it. Could it be that it's not actually being set but queued up in the event loop?
------------ EDIT ------------
I think I've figured out what's causing this issue, thanks to insights from @jcford and @istrupin.
A crucial detail I left out initially was that the event triggering the promise calls and spinner update was linked to a
$scope.$on("some-name", function(){...})$on function don't trigger $apply/$digest, so I need to manually call $digest.
Interestingly, I noticed that within $q.all(), it seems to trigger $apply since I observed the expected DOM changes while debugging. Just an observation for what it's worth.
tl;dr - remember to call $digest.