What is the correct way to load data on an edit page using angularjs?

Question

First time working with angularjs and my data is loading a little slow. Basically when the user chooses to edit a Task, we are accessing a web service to return the data for the task. In addition, there are 3 dropdowns on the page so we need to access a service to return that data as well.

The page displays, the data for the task fills in, and then one at a time the data for the dropdowns fill in.

How can I wait to display the template until all the data has been loaded? or get the data to load simultaneously?

Here is an example of the code that is getting the data:

$scope.task = Task.get({ id: taskId }, function() {
        $scope.vendor.terms = Term.query('', function() {
            $scope.vendor.states = State.query();
        });
    });

Here are the services:

angular.module('App.Services', ['ngResource'])
.factory('Task', function($resource, baseUrl) {
    return $resource(baseUrl+'/tasks/:id', {'id': '@id'}, {
    });
})
.factory('Vendor', function($resource, baseUrl) {
    return $resource(baseUrl+'/vendors/:id', {'id': '@id'}, {
    });
})
.factory('Statue', function($resource, baseUrl) {
    return $resource(baseUrl+'/states/:id', {'id': '@id'}, {
    });
})

Answer 1

You could use resolves. It's a property that you set on whatever route you want, in your app.js Basically, it's a list of promises that must be resolved before the controller will instantiate and the view will load. Check out this video from egghead.io screencasts link