Angularjs multiple $http.get request

Question

I need to do two $http.get call and I need to send returned response data to my service for doing further calculation.

I want to do something like below:

function productCalculationCtrl($scope, $http, MyService){     $scope.calculate = function(query){              $http.get('FIRSTRESTURL', {cache: false}).success(function(data){                 $scope.product_list_1 = data;             });              $http.get('SECONDRESTURL', {'cache': false}).success(function(data){                 $scope.product_list_2 = data;             });             $scope.results = MyService.doCalculation($scope.product_list_1, $scope.product_list_2);         }     } 

In my markup I am calling it like

<button class="btn" ng-click="calculate(query)">Calculate</button> 

As $http.get is asynchronous, I am not getting the data when passing in doCalculation method.

Any idea how can I implement multiple $http.get request and work like above implementation to pass both the response data into service?

Answer 1

What you need is $q.all.

Add $q to controller's dependencies, then try:

$scope.product_list_1 = $http.get('FIRSTRESTURL', {cache: false}); $scope.product_list_2 = $http.get('SECONDRESTURL', {'cache': false});  $q.all([$scope.product_list_1, $scope.product_list_2]).then(function(values) {     $scope.results = MyService.doCalculation(values[0], values[1]); });