Manipulating variable returned that is returned by promise AngularJS

Question

So, I am stuck here most probably because of my limited understanding of promise Object.

my function that fetch data from factory is

    $scope.getLogoFromService = function() {
    console.log('getLogoFromService called');
    var promise = 
        logoService.getLogo();
    promise.then(
       function(payload) { 
           console.log(payload.data.home_header.logo.file_path);
           $scope.logoPath = payload.data.home_header.logo.file_path;
       },
       function(errorPayload) {
           $log.error('failure loading logo', errorPayload);
       });
  };

the Variable is accessible on the view if I do {{logoPath}}, and when I console.log inside the function, but not accessible in another function.

   $scope.UpdateLogo = function ()
        {
            console.log('UpdateLogo called');
            console.log($scope.logoPath);
        }

returns undefined.

my service code, just in case you need to view

App.factory('logoService', function($http) {
    return {
      getLogo: function() {
         return $http.get('cms/general');
      }
    }
  }); 

Answer 1

It looks like you're calling UpdateLogo before your http call has returned, I would recommend handling it this way:

$scope.getLogoFromService = function() {
  console.log('getLogoFromService called');
  var promise = logoService.getLogo();

  promise.then(
    function(payload) { 
      console.log(payload.data.home_header.logo.file_path);
      $scope.logoPath = payload.data.home_header.logo.file_path; // For use in the view.
      return $scope.logoPath; // Return the logopath to the next function in the chain.
    },
    function(errorPayload) {
      $log.error('failure loading logo', errorPayload);
    }
  );

  return promise;
};

$scope.UpdateLogo = function() {
  console.log('UpdateLogo called');
  $scope.getLogoFromService().then(function(logoPath) {
    console.log('getLogoFromService resolved!');
    console.log(logoPath);
  });
}

Since logoPath is assigned to the scope you don't technically have to worry about passing it down the promise chain, but this is best practice so I've suggested it first, alternatively this will also work:

$scope.getLogoFromService = function() {
  console.log('getLogoFromService called');
  var promise = logoService.getLogo();

  promise.then(
    function(payload) { 
      console.log(payload.data.home_header.logo.file_path);
      $scope.logoPath = payload.data.home_header.logo.file_path; // For use in the view.
    },
    function(errorPayload) {
      $log.error('failure loading logo', errorPayload);
    }
  );

  return promise;
};

$scope.UpdateLogo = function() {
  console.log('UpdateLogo called');
  $scope.getLogoFromService().then(function() {
    console.log('getLogoFromService resolved!');
    console.log($scope.logoPath);
  });
}

In this case we're just using the promise as a "the data is available now" notification, but we don't actually pass the data since it has been assigned to the $scope and both functions have access to that.

The whole thing could also be compressed to one simpler function but I've kept your original structure intact.