Hide Angular brackets until javascript loaded

Question

I have a few bits of HTML like

<p class="noresults">{{numberOfContacts}} Results Are Available</p>

Is it possible for me to hide {{numberOfContacts}} until Angular has loaded? So it would just say Results Are Available

I've seem some solutions such as hiding the entire body until Angular has loaded, but I'd rather not do that if possible.

Answer 1

Yes, use ng-cloak. Simply add class="ng-cloak" or ng-cloak to an element like this

Using directive <div ng-cloak></div>

Using class <div class="ng-cloak"></div>

It's simply a set of CSS rules with display: none !important and as Angular has rendered your DOM it removes the ng-cloak so an element is visible.

Answer 2

use <span ng-bind="numberOfContacts" /> instead of {{numberOfContacts}}