title: AngularJS ng-if has a strange delay
body: <p><a href="https://i.stack.imgur.com/wPbAW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wPbAW.png" alt="problem with delay"></a></p>
  
  <p>On the image, you can see that there are loading spinners next to the numbers. </p>
  
  <p>The DOM element that shows the spinner has <code>ng-if = "gridItem.contentScoreLoadingState == 'loading'"</code>. </p>
  
  <p>The DOM element that shows the number has <code>ng-if = "gridItem.contentScoreLoadingState == 'loaded'"</code>.</p>
  
  <p>Code is below:</p>
  
  <pre><code>&lt;i class="fa fa-spin fa-spinner" style="font-size: 12px;" ng-if="gridItem.contentScoreLoadingState=='loading'"&gt;&lt;/i&gt;
  &lt;span ng-if="gridItem.contentScoreLoadingState=='failed'"&gt;-&lt;/span&gt;
  &lt;span ng-if="gridItem.contentScoreLoadingState=='loaded'"&gt;{{ gridItem.content_score }}&lt;/span&gt;
  </code></pre>
  
  <p>When loading ends, first the number shows and after a small delay loading spinner disappears. But for an instant both of them appears at the same time and I'm not sure why.</p>