merge $http.get() with another $http.get()/angular - angularjs

Question

I have the service :
service.getMarketedPrograms = function() {
return $http.get( archApiUrl + "program/marketed-program" ).then(function( result ) {
return result.data;
});
};
I want to append the service with the above :
service.getEligibility = function( params ) {
return $http.get( maverickApiUrl + "quote/getEligibility", { params: params }).then( transformEligibility );
};
After merging I want to filter the final one

Answer 1

If I understand correctly, you need to get both results firstly and then decide what to return.
You need to inject $q service (angularjs promises) and then use such code:
var promises = [getMarketedPrograms(), getEligibility()];
$q.all(promises).then(function(results){ //array of results
console.log(results[0]); //marketedPrograms result
console.log(results[1]); //getEligibility result
return results[0]; //for example, or do whatever you need
})

Answer 2

If you have two different controllers and two services, to synchronize them all, you should use events mechanism, i.e. $broadcast and $on methods. So, whenAllDone function will be called only when both controllers have done their tasks($scope.self = true):
function controllerFactory(timeout, name){
return function($scope, $timeout){
var self = this;
var outerResult;
$scope.name = name;
whenAllDone = (data) => {
console.log(`Sync ${name} - selfResult: ${timeout}, outerResult: ${data}`);
}
$scope.$on('done', (x, arg) => {
if(arg.ctrl != self){
$scope.outer = true;
outerResult = arg.val;
if($scope.self)
whenAllDone(arg.val);
}
});
//mimic for getEligibility and getMarketedPrograms
$timeout(() => {
$scope.self = true;
$scope.$parent.$broadcast('done', { ctrl: self, val: timeout });
if($scope.outer)
whenAllDone(outerResult);
}, timeout);
}
}
angular.module('app', [])
.controller('ctrl1', controllerFactory(2000, 'ctrl1'))
.controller('ctrl2', controllerFactory(5000, 'ctrl2'))
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<script type="text/ng-template" id="myTemplate">
<h4>{{name}}:</h4>
<span ng-style="{'background-color': self ? 'green' : 'white'}">self</span>
<span ng-style="{'background-color': outer ? 'green' : 'white'}">outer</span>
</script>
<div ng-controller='ctrl1' ng-include="'myTemplate'"></div>
<div ng-controller='ctrl2' ng-include="'myTemplate'"></div>
</div>