How do I have AngularJS show a loading spinner until the data has finished loading?

If my controller has $scope.items = [{name: "One"}] set up statically, and an AJAX loader which populates $scope.items[0]['lateLoader'] = "Hello", I'd like the spinner to show until the AJAX load is complete, and then populate the bound span with the retrieved data.

<ul ng-repeat="item in items">
  <li>
    <p>Always present: {{item.name}}</p>
    <p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
  </li>
</ul>

This code populates the bound span immediately, and as item.lateLoader is empty the spinner is replaced with nothing.

How should I do this cleanly?

javascript angularjs angularjs-ng-repeat
Edit
Report