Pass on value from inner get statement to out get statement - angularjs

Question

Hi I am new to angular and wanted to understand promises. I have 2 http get (nested) one inside another. I want to use the value of the inside loop to form a link for the outside get statement as below.
$scope.loadtable = function (task){
var bgUrl = "cloudantlink";
$http.get(bgUrl)
.success(function (response) {
$scope.fileTableData =[];
for(var i =0;i<response.rows.length;i++){
var fileUrl = "cloudantURL";
$http.get(fileUrl, {responseType:'arraybuffer'})
.success(function (response) {
var file = new Blob([response], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$scope.content = $sce.trustAsResourceUrl(fileURL);
console.log("this is value of promise inside loop", $scope.content);
}).error(function(data){
});
console.log("this is value of promise outside loop",$scope.content);
var fileTableEntry = {
'download' : '' + $scope.content+'',
};
$scope.TableData.push(TableEntry);
}
$scope.loadTable();
}).error(function(data){
});
};
The $scope.content value is always undefined or null outside the second loop. Could someone suggest me a way to pass the value into the first get statement.

Answer 1

A $http.get, or any async operation will just work in the background, and any statement you write after it won't actually wait for this to finish.
If you want to run code after it's finished, you have to use the .then method of the Promise it returns.
In this case, you probably want to wait for all these operations to finish, and then call your $scope.loadTable and related things.
To do this, save the promises returned by the requests and wait for them with $q.all to resolve. Don't forget to add $q to your controller's dependencies.
var fileRequests = [];
for(...) {
fileRequests.push($http.get(fileUrl)
.then(function success(response) { ... return fileUrl; }))
}
$q.all(fileRequests).then(function(fileUrls) { .. $scope.loadTable() })
You also overwrite $scope.content every time, I think you meant to save the URLs in $scope.fileTableData[i].
Full code:
$scope.loadtable = function (task){
var bgUrl = "cloudantlink";
$http.get(bgUrl)
.success(function (response) {
var filePromises =[];
for(var i =0;i<response.rows.length;i++){
var fileUrl = "cloudantURL";
// Saving the promises
filePromises[i] = $http.get(fileUrl, {responseType:'arraybuffer'})
.then(function success(response) {
var file = new Blob([response], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
// This will be the result when the promise is resolved
return $sce.trustAsResourceUrl(fileURL);
}, function error(data) {
});
}
// Waiting for the promises
$q.all(filePromises).then(function(fileUrls)
{
// fileUrls contain the results returned by the success callback
$scope.TableData = fileUrls.map(function(url) {
return { 'download' : '' + url+'', };
})
$scope.loadTable();
})
}).error(function(data){
});