AngularJS: show loading HTML until data is loaded

Question

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 statica

Answer 1

@lucuma,

Great answer, an alternative can be to inject $timeout and replace the native timeout function:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

        $scope.name = 'World';
        $scope.items = [{name: "One"}];
        $timeout(function() {
                $scope.$apply(function() {
                        $scope.items[0].lateLoader = 'i just loaded';  
                });
        }, 1000);
});