How to assign promise to scope - angularjs

Question

How to assign $promise to $scope.advertiserName? In the below example, Console.log($scope.title) returns "undefined".
Restangular.all('advertiser').one("?id=" + 1).getList().then(function(data) {
$scope.advertiserName = data.name;
$scope.advertiserId = data.id;
});
$scope.title = $scope.advertiserName;
$scope.id = $scope.advertiserId;

Answer 1

We can use callback function to execute lines of code after getting response of ajax call.You can visit this blog for awesome explanation of call back function http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/. Lets understand it through code.
$scope.setNameId = function (title,id,callBackFunction) {
Restangular.all('advertiser').one("?id=" + 1).getList().then(function(data) {
// $scope.advertiserName = data.name;
$scope.title= data.name;
// $scope.advertiserId = data.id;
$scope.id=data.id;
callBackFunction();
});
}
$scope.setNameId($scope.title,$scope.id,executeAfterResponse);
var executeAfterResponse=function(){
//code that you want to execute when value of $scope.title and $scope.id has changed
};
We can also do it by this approach
$scope.setNameId(executeAfterResponse);
Without passing $scope.title and $scope.id variable in argument of $scope.setNameId function as $scope variables can be accessed directly inside same file.
Commented lines of code are not required as we are assigning value to $scope.name and $scope.id directly.

Answer 2

If I am getting you correct, this is happening because of asynchronous call.
Asynchronous means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example,
$.ajax returns immediately and the next statement, return result;, is
executed before the function you passed as success callback was even
called.
You should do it like
$scope.someFunction = function () {
Restangular.all('advertiser').one("?id=" + 1).getList().then(function(data) {
return $scope.advertiserName = data.name;
});
}
$scope.title = $scope.someFunction(); //It will give you output
Edit 1:
I read many articles for the same and what I noticed that the response of asynchronous call will be taken out from normal execution flow. Either you use restangule or $http call, both are asynchronous call. So compiler will not wait for your response. You need to tell the compiler to wait for the ajax response. What I did in one of my projects. Here is a simple example which may illustrate more.
First I declared a controller function. Like below
$scope.asynchronousCallee = function (){
$http.get('/url').
success(function(data, status, headers, config) {
$scope.myAjaData = data;
});
}
$scope.asynchronousCallee(); //Call above function just after the declaration
Simply this function will receive data from server with a get call and assign response in variable but please note this success function will be called asynchronously. So what I did, I called asynchronousCallee function just after the declaration of it. Now compiler will wait for the response of this function and after executing the function, compiler will proceed further. I hope it may help you brother :-)

Answer 3

In your example below you are expecting the memory reference of advertiserName and title and advertiserId and id to be maintained. However, when pulling properties off of the scope it is retrieved by value not by reference. If you wanted to make your code work you would have to do one of two things:
Restangular.all('advertiser').one("?id=" + 1).getList().then(function(data) {
$scope.advertiserName = data.name;
$scope.advertiserId = data.id;
});
$scope.title = $scope.advertiserName;
$scope.id = $scope.advertiserId;
Initialize the correct property on the scope:
Restangular.all('advertiser').one("?id=" + 1).getList().then(function(data) {
$scope.title = data.name;
$scope.id = data.id;
});
Make it a by reference update instead:
var advertiser = {
id: $scope.advertiser,
title: $scope.advertiser
}
$scope.advertiser = advertiser;
Restangular.all('advertiser').one("?id=" + 1).getList().then(function(data) {
advertiser.title = data.name;
advertiser.id = data.id;
});
Since promises through the use of angular already trigger a digest cycle the view will then be updated

Answer 4

Restangular.all('advertiser').one("?id=" + 1).getList().then(function(data) {
$scope.advertiserName = data.name;
$scope.advertiserId = data.id;
return { name : data.name, id : data.id };
}, function(er){
//Handle error
})
.then(function(response){
$scope.title = response.name;
$scope.id = response.id;
}, function(er){
//Handle error
});