How to assign promise to scope

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 :-)