Angular’s double-curly-bracket notation is super-easy. Nay, elegant. It’s a great, straightforward way to demonstrate the power of data-binding in templates.
But… there’s a drawback: until Angular has a chance to process those expressions, bind to them, and update, your users will see the brackets and the expression within them, rather than the content that should be there. This isn’t a problem with subsidiary templates that Angular is loading for you, because Angular is able to perform all the bindings before the template is rendered. But with your index.html page, things are different, and you see some ugly stuff before Angular kicks in.
Fortunately, there’s an easy solution: Angular’s `ng-bind` rides to the rescue. Simply use `ng-bind` as the attribute of an element, and make your expression into that attribute’s value. eg., instead of…
<h1>{{model.header.title}}</h1>
… just use instead:
<h1 ng-bind="model.header.title"></h1>
Should you have other text inside of your main element, just use an inline element like a <span> to attach the attribute to. That’s it. Once you know about it, `ng-bind` is very nearly as easy to use as double-curly-brackets, and you get better, flicker-free results for your user.
ng-cloak