q.all not working for multiple promises

Question

I have the following q.all calling to resolve two promises. I checked all the posts and tried all other ways of implementation q.all and its the same case

var xyzdeffered = $q.defer();
service1.getServiceDetail1($routeParams.id).then(function(promise) {
    xyzdeffered.resolve(promise);
});

var abcdeffered = $q.defer();
service2.getServiceDetail2($routeParams.id).then(function(promise) {
abcdeffered.resolve(promise);
});


$q.all([ xyzdeffered, abcdeffered ]).then(function(data) {

    $scope.variable = data;

});

I am expecting the variable in q.all should get populated only after the first two promises are resolved. But unfortunately the service call itself doesn't get returned with data and the control moves on to the q.all. I find this weird because as per documentation the q.all is called only when your promises are returned with 200 response and are resolved. I checked analysing the network calls and also put some alert to see the sequence of the code and find that the q.all alert is the first alert to be popped up and then the other promises are resolved. Its really making me mad as why a simple implementation of q.all doesnt work.. Any help will be appreciated.

Answer 1

Why not directly call $q.all on first promise ?

$q.all([
    service1.getServiceDetail1($routeParams.id),
    service2.getServiceDetail2($routeParams.id)
]).then(function(data) {
    //Array of result [resultOfgetServiceDetails1, resultOfgetServiceDetails2]
    $scope.variable = data;
});

Answer 2

You need to reference the promise on the $q.defer() return object:

$q.all([ xyzdeffered.promise, abcdeffered.promise ])