AngularJS and proper use of ngCloak

Question

Quote from one of the comments regarding ngCloak directive (AngularJS documentation):

It is only really needed on your "index.html" page, because the browser may try to render things before Angular has had a chance to parse/compile it. At runtime, when Angular pulls in content due to ng-view, ng-include, etc., it will be processed by Angular before the browser renders.

I created a example in jsFiddle to verify this and on my surprise the expression is not evaluated before it is rendered in the browser. I would expect that the template will first be compiled & linked and then attached to the DOM - which is not the case.

Does that mean that every {{expression}} inside templates should also be wrapped in ngCloak to prevent flickering or am I missing something?

Answer 1

My guess is that the alert allow the browser to render before angular finished his job, adding a setTimeout with 0 delay show a rendered template:

http://jsfiddle.net/g/FLZZR/5/

function TemplateController ($scope) {    
    $scope.expression = "This should already be rendered...";
    setTimeout(function(){
        alert("... but it isn't.");
    });
}

Additional note: you can't expect the template to be rendered at the point you place your alert, at best it would be hidden, angular use dirty checking to do its magic and you must let it "digest" your changes for them to show in the DOM.