Nesting angular routeProvider resolves

Question

So I have a service that returns a data set based on a passed parameter. Lets say

"red widgets", "blue widgets", "glossary"

I need to call glossary the first time this route is selected which will always call the data for the red widgets as well.

.config( ['$routeProvider', function( $routeProvider ){
    $routeProvider.when('/compare/:comparetype', {
        controller: 'compareController',
        templateUrl: 'compare/compare.tpl.html',
            resolve: {
            responseData: function(myService, $route){
                return myService.getData(
                    $route.current.params.comparetype
                );
            }
        }   
    });
}])

This code works to get the first data set based on the passed comparetype ("red Widgets") but how would I also call myService.getData('Glossary'). I think it is a asycn thing but I am still learning about routes and resolve. Below is something like what I would like. I understand this is wrong but I hope it illistrates my intended purpose.

.config( ['$routeProvider', function( $routeProvider ){
    $routeProvider.when('/compare/:comparetype', {
        controller: 'compareController',
        templateUrl: 'compare/compare.tpl.html',
            resolve: {
            responseData: function(myService, $route){
                var route = $route.current.params.comparetype;
                var resp = myService.getData(route);
                if (route === 'red widget') {
                    resp.glossary = myService.getData('glossary');
                }
                return resp;
            }
        }   
    });
}])

As a side note, resp.glossary will eventually be placed in $rootScope.glossary if it is in responseData. This part isn't the problem. I just need to know how why myService.getData() isn't working the way I want it to.

Here is my factory method:

.factory('myService', function($http) {
    var myService = {
        getData: function(compare) {
            var promise = $http({
                url: "/data.json",
                method: "GET",
                cache: false,
                params: {
                    compare: compare
                },
                transformResponse: function(response) {
                    // do some stuff...
                    return resp;
                }
            })
            .then(function(response) {
                return response.data;
            });
            return promise;
        }
        return myService;
    }
});

Answer 1

You would have to create your own promise and return that for the resolve function. They you would have to resolve the promise you created when complete data is available. Something like

resolve: {
            responseData: function(myService, $route,$q){
                var defer=$q.defer();
                var route = $route.current.params.comparetype;
                myService.getData(route).then(function(data){
                      resp=data;
                      if (route === 'red widget') {
                          myService.getData('glossary').then(function(glossary){
                               resp.glossary=glossary;
                               defer.resolve(data);
                          });
                      }

                });
                return defer.promise;
            }

I am assuming that your getData is a async method that return promise.