Code execution is performed * after the change in the observed property takes effect in the user interface

Question

In AngularJS, how can I guarantee that the code only runs after the user interface change has completely changed in the user interface.

For example, let's say that the visibility of the loading indicator is tied to the value of the property isLoadingon the model. How can I guarantee that the following functions will be executed only after the loading indicator becomes visible?

eg.

my-template.html

<my-loading-indicator ng-show="model.isLoading"></my-loading-indicator>

my-controller.js

// ...
MyController.prototype.doSomething = function() {
  this.model.isLoading = true;
  // how can I guarantee that the UI is now showing the loading indicator before proceeding?
}

Answer 1

$timeout, .

// will start digest cycle since it is bound to `ng-show`
this.model.isLoading = true;

$timeout(function(){
   // indicator should be visible now
}[,optional delay]);

$timeout ,

Answer 2

$scope.$apply(); $digest.

" $digest , , , . , ."