Angularjs controller assigning variable from service, before service method returns

Question

I'm trying to use a service to get a user's profile information to display in the header of my template.

The problem is that my variable in my controller is getting set before the service actually returns anything (or at least it seems that way).

app.js

// This gets the basic information that is needed for every page
myapp.service('base', function($http) {

    this.getProfile = function() {
        // Get the logge din users info
        $http.get(baseUrl+'v1/users?api_key=1234')
            .success(function(response) {
                console.log('base response = '+response);
                return response;
            })  
    }

});

profile.js

myapp.controller('ProfileController', ['$scope', '$http', 'base', function($scope, $http, base) {

    base.getAuthHeader();
    $scope.profile = base.getProfile();
    console.log('$scope.profile = '+$scope.profile);        
}]);

In my firebug, this is the output in this exact order:

$scope.profile = undefined
base repose = [object Object]

How is the line console.log('$scope.profile = '+$scope.profile); getting called before console.log('base response = '+response); ?

Answer 1

You need to be using callback.

myapp.service('base', function($http) {

    this.getProfile = function() {
        // Get the logge din users info
        $http.get(baseUrl+'v1/users?api_key=1234')
            .success(function(response) {
                // this code is async
                // it wont fire as a part of the execution block
                // but rather on its own once the `$http.get` returns
                console.log('base response = '+response);
                return response; // also this return returns
                // the .success function not the .getProfile function
            })  
    }

});

---

with callbacks your code would look something like this:

myapp.service('base', function($http) {
                               // accept a function as an argument
    this.getProfile = function(callback) {
        // Get the logge din users info
        $http.get(baseUrl+'v1/users?api_key=1234')
            .success(function(response) {
                console.log('base response = '+response);
                // fire that function when response is available
                callback(response);
            })  
    }

});

then in the controller

myapp.controller('ProfileController', ['$scope', '$http', 'base', function($scope, $http, base) {

    base.getAuthHeader();
    base.getProfile(function(response){
        $scope.profile = response;
        console.log('$scope.profile = '+$scope.profile);        
    });

}]);

---

Or you could handle the async nature with promises instead of callbacks.