title: AngularJS: show loading HTML until data is loaded
body: <p>How do I have AngularJS show a loading spinner until the data has finished loading?</p>
  
  <p>If my controller has <code>$scope.items = [{name: "One"}]</code> set up statically, and an AJAX loader which populates <code>$scope.items[0]['lateLoader'] = "Hello"</code>, I'd like the spinner to show until the AJAX load is complete, and then populate the bound span with the retrieved data.</p>
  
  <pre><code>&lt;ul ng-repeat="item in items"&gt;
    &lt;li&gt;
      &lt;p&gt;Always present: {{item.name}}&lt;/p&gt;
      &lt;p&gt;Loads later: &lt;span ng-bind="item.lateLoader"&gt;&lt;i class="icon icon-refresh icon-spin"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This code populates the bound span immediately, and as <code>item.lateLoader</code> is empty the spinner is replaced with nothing.</p>
  
  <p>How should I do this cleanly?</p>