Cannot make an array by multiple Restangular responses - angularjs

Question

I am using Angular and have to populate a table and for this i need an array which has values by multiple calls to server.
I have following scenerio
Angular Controller:
var application={};
var data-[];
$scope.tableData=[];
Restangular.all("a").getList().then(function(arr1){
for(var i=0;i<arr1.length;i++)
{
application.app=arr1[i];
Restangular.one("b",arr1[i].id).get().then(function(obj1){
application.obj1=obj1;
});
Restangular.one("c",arr1[i].id).get().then(function(obj2){
application.obj2=obj2;
});
data.push(application);
application={};
if(i==arr1.length-1){
$scope.tableData=data;
}
}
});
Now the table in view shows row equal to length of arr1 and also shows the data in arr1 but the data by other Restangular calls are not attached with that array except last iteration.
OnlyiIn last iteration the array is fully made including arr1,obj1,obj2 other array indexes r missing obj1 n obj2.
This is because of async behaviour of Restangular response but cannot understand how to handle it.
Note:
(Expected result)
data[
{
app:{
app_id:1,
status:1
},
obj1:{
name:"user1",
gender:"male"
},
obj2:{
telephone:"63532367",
address:"abc"
}
},
{
app:{
app_id:2,
status:1
},
obj1:{
name:"user2",
gender:"female"
},
obj2:{
telephone:"63532367",
address:"xyz"
}
},{
app:{
app_id:3,
status:1
},
obj1:{
name:"user3",
gender:"female"
},
obj2:{
telephone:"63532367",
address:"xyz"
}
}
]
(Current Result)
data[
{
app:{
app_id:1,
status:1
}
},
{
app:{
app_id:2,
status:1
}
},
{
app:{
app_id:3,
status:1
},
obj1:{
name:"user3",
gender:"female"
},
obj2:{
}
}
]

Answer 1

Restangular is async (all the Restangular.one() is left before the callback you pass to .then). That's why Promises is used.
Even if it would be possible to make Restangular to be sync you shouldn't do that because this will block the browser until the data is requested which will be a bad user experience.
You should try to get into Promise as they were designed to look like sync code but behave async.
You can try something like this:
var a = Restangular.all("a").getList().then(function(arr1){
// Some modification of the backend data response
return modifiedData; // Now this should be passed to each of those Restanngular.one() methods sequentially
});
Above code will return the Promise that is returned by the .then call, which can be chained as following concept:
(new Promise(function( resolve, reject){
$timeout(function() {
resolve("some");
});
}))
.then(function(data) {
return data+' data';
})
.then(function(data) {
return new Promise(function(resolve, reject) {
$timeout(function() {
resolve(data+' !!!!!!');
});
});
})
.then(function(data) {
// this will have 'some data !!!!!!'
console.log(data);
});