title: AngularJS ng-cloak does not prevent code blinking in Mean.js
body: <p>This concerns a MEAN.js environment. I have if-statements in my Angular view to check if I have any results from my database. If there are results then I show them, if not then I show an error message.</p>
  <p>I have an issue with Angular code blinking: when the page loads, for a split-second I see the error message, and then it immediately shows the results from my database. The <code>ng-cloak</code> directive does not work.</p>
  <h3>Code</h3>
  <p>Below I have included very basic Angular code that should make clear what I am doing.</p>
  <p>Controller:</p>
  <pre><code>// Return a specific person from the database.
  this.person = Persons.get({
      personId: $stateParams.personId
  });
  </code></pre>
  <p>View:</p>
  <pre><code>&lt;div ng-if=&quot;personCtrl.person.length&quot;&gt;
      &lt;!-- Show person's details here... --&gt;
  &lt;/div&gt;
  
  &lt;div ng-if=&quot;!personCtrl.person.length&quot; ng-cloak&gt;
      &lt;p&gt;Sorry, person could not be found.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I tried adding the <code>ng-cloak</code> directive, which does not work. MEAN.js also uses Bootstrap and provides a few CSS classes, but no matter which ones I add, none of them work:</p>
  <pre><code>[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
  }
  </code></pre>
  <p>In short: I can add the <code>ng-cloak</code> directive AND the <code>ng-cloak</code> CSS class, but they do not work. I can add <code>style=&quot;display:none;&quot;</code> but that hides the error message even if it is supposed to be shown.</p>