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

I actually have been using a solution for this for a while now that works great and is better than using a timeout in my opinion. I am using $resource, but you could do the same thing with $http. On my $resource objects, I add the bit in the following code that sets loaded to true.

$scope.customer = $resource(dataUrl + "/Course/Social/" + courseName)
    .get({}, function (data) { data.loaded = true; });

Then, in my view I can use:

ng-hide="customer.loaded"

Of course, I wouldn't use a $resource directly in a controller, I extract that to a customerRepository service, but it was more simple to show it this way here.