AngularJS UI-Router Resolve collection - angularjs

Question

I am trying to do something more abstract with Resolve but failing to get the output. Looks like I am missing something.
Problem : I need to load the lookup table data before the view loads. So, I am using resolve in ui-router which is working great for each lookup. I thought its better to make a collection of lookups into a single object but its failing. Here is the code.
Not working code:
resolve: {
lookups: ['GenericFactory', function(genericFactory) {
return {
StateList: genericFactory.GetStateList().then(function(response){return response.data;}),
EmployeeTypeList: genericFactory.GetEmployeeType().then(function(response){return response.data;})
}
}]
}
Working code:
resolve: {
StateList: ['GenericFactory', function(genericFactory) {
return genericFactory.GetStateList()
}],
EmployeeTypeList: ['GenericFactory', function(genericFactory) {
return genericFactory.GetEmployeeType()
}]
}

Answer 1

From the docs:
An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved before the controller is instantiated.
I'd say you can't make the non-working code work that way since you are trying to return an object. Since the object is not a promise by itself, the rule above does not apply.
Maybe this will work - you can fire up these requests, wrap them in a promise of its own and return that (haven't been tested):
lookups: ['$q', 'GenericFactory', function($q, genericFactory) {
var deferred = $q.defer();
var q1 = genericFactory.GetStateList().then(function(response){return response.data;}),
var q2 = genericFactory.GetEmployeeType().then(function(response){return response.data;})
$q.all([q1, q2]).then(function (res) {
var obj = {
StateList = res[0];
EmployeeTypeList = res[1];
}
deferred.resolve(obj);
});
return deferred.promise;
}]