I need to load some data on page load and then do execute a task. in order to get the data i want i execute multiple different ajax calls. But in order to execute the task, i need all to make sure that all the ajax calls have finished. Here is what i have done so far:

$q.when(
        $http.get('url1').success(function (data) {
            $scope.data1 = data;
            console.log("ajax1 finished");
        }),
        $http.get('url2').success(function (data) {
            $scope.data2 = data;
            console.log("ajax2 finished");
        }),
        $http.get('url3').success(function (data) {
            $scope.data3 = data;
            console.log("ajax3 finished");
        }),
        $http.get('url4').success(function (data) {
            $scope.data4 = data;
            console.log("ajax4 finished");
        })
    ).then(
        console.log("All ajax calls have finished!"),
        executeTask()
    );

My problem is that the code in block then(...); is not executed after all the ajax call have finished. I get something like this in my console:

ajax2 finished
ajax1 finished
All ajax calls have finished!
ajax3 finished
ajax4 finished

I must be doing something wrong. How can i make it work the way i want?

Edit: I tried the following like it was mentioned in the answers but i still face the same problem.

$q.all([
    $http.get('url1').then(function (data) {
        $scope.data1 = data;
        console.log("");
    }),
    $http.get('url2').success(function (data) {
        $scope.data2 = then;
        console.log("ajax2 finished");
    }),
    $http.get('url3').then(function (data) {
        $scope.data3 = data;
        console.log("ajax3 finished");
    }),
    $http.get('url4').then(function (data) {
        $scope.data4 = data;
        console.log("ajax4 finished");
    })
]).then(
    console.log(""),
    executeTask()
);

I need to load some data on page load and then do execute a task. in order to get the data i want i execute multiple different ajax calls. But in order to execute the task, i need all to make sure that all the ajax calls have finished. Here is what i have done so far:

$q.when(
        $http.get('url1').success(function (data) {
            $scope.data1 = data;
            console.log("ajax1 finished");
        }),
        $http.get('url2').success(function (data) {
            $scope.data2 = data;
            console.log("ajax2 finished");
        }),
        $http.get('url3').success(function (data) {
            $scope.data3 = data;
            console.log("ajax3 finished");
        }),
        $http.get('url4').success(function (data) {
            $scope.data4 = data;
            console.log("ajax4 finished");
        })
    ).then(
        console.log("All ajax calls have finished!"),
        executeTask()
    );

My problem is that the code in block then(...); is not executed after all the ajax call have finished. I get something like this in my console:

ajax2 finished
ajax1 finished
All ajax calls have finished!
ajax3 finished
ajax4 finished

I must be doing something wrong. How can i make it work the way i want?

Edit: I tried the following like it was mentioned in the answers but i still face the same problem.

$q.all([
    $http.get('url1').then(function (data) {
        $scope.data1 = data;
        console.log("");
    }),
    $http.get('url2').success(function (data) {
        $scope.data2 = then;
        console.log("ajax2 finished");
    }),
    $http.get('url3').then(function (data) {
        $scope.data3 = data;
        console.log("ajax3 finished");
    }),
    $http.get('url4').then(function (data) {
        $scope.data4 = data;
        console.log("ajax4 finished");
    })
]).then(
    console.log(""),
    executeTask()
);

• javascript
• ajax
• angularjs
• angular-promise

• I believe that $q.all should accept an array of promises – maurycy Commented Jul 31, 2014 at 10:16
• @maurycy tried this also and it doesn't work. – Christos Baziotis Commented Jul 31, 2014 at 10:22
• 1 You still have a success call in your edited post. – Michael Kang Commented Jul 31, 2014 at 10:28

2 Answers 2

I've made a working plunker for you with use of $q.all()

http://plnkr.co/edit/JHd3XPTKBxx4KRso5JRB?p=preview

  $q.all([
    $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
      $scope.ip.one = response.data
      console.log('one')
    }),
    $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
      $scope.ip.two = response.data
      console.log('two')
    }),
    $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
      $scope.ip.three = response.data
      console.log('three')
    }),
    $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
      $scope.ip.four = response.data
      console.log('four')
    }),
  ]).then(function() {
    console.log('all')
  })

You have two solutions :

• You want to use $q.all() in order to wait for multiple promise to resolve. Example : http://jsfiddle.net/ThomasBurleson/QqKuk/

• Use the resolve mecanism of routeProvider in order to pre-load promise before rendering your screen : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider