Angular async calls

The result from $soundcloud.set() overrides the value from sc.

If you tried to bind the value from $soundcloud.fetch to the scope before the $soundcloud.set() is returned it binds undefined to the scope, since the var sc is not yet defined. When $soundcloud.set() set the sc field, the scope variable will never get notified since it only got the undefined value and know nothing about sc.

The easiest sollution is to create a wrapper object that will never be removed. Something like this.

app.service('$soundcloud', ['$http', function ($http) {    
var sc = {};    // define an object instead of undefined
this.set = function () {
    $http.get('/users/active/services/soundcloud')
        .success(function (obj) {
            sc.soundcloud = obj; // write to a field on the object, 
                                 // do not override sc, since sc is already returned
        })
        .error(function () {
            console.log('Error fetching soundcloud feed')
        })
}    
this.fetch = function () {
    return sc;
}    
}]);

When you use the result of $soundcloud.fetch() you need to refer to the soundcloud field. At least it will always get updated when $soundcloud.set is called

You're right about it being a problem with the asynchronicity.

1. The code in .run() triggers an asynchronous .get().
2. Before the result comes back, and the callback passed to .success() is run, you run fetch(). As such, fetch() returns an undefined sc.
3. You then console.log() this, hence you see undefined.
4. The promise gets resolved with the data from your .get(), and you assign sc to the result.

The approach @Andre Paap has just outlined is a good one - essentially by creating a blank reference object and updating one of its properties on the callback (rather than overwriting the reference completely), you can still assign this to the scope, and angular will 'magically' update the view once it's populated (using the data binding). However, if you console.log() the result immediately, you'll still see the same thing.

In other words, if you had this inside your service:

var currentUser = {};    
this.set = function () {
    return $http.get('/users/active/profile')
        .success(function (obj) {
            currentUser.name = obj.name;
        })
        .error(function () {
            console.log('ERR');
        })
}    

And this in your template:

<span ng-show="currentUser.name"> Hello {{currentUser.name}}! </span>

Then putting this in your controller would result in the above span showing up correctly once the set() call has returned:

$scope.currentUser =  $user.fetch()
// NOTE: the below would still log undefined:
console.log($scope.currentUser.name) //<- undefined.

If you wanted to run some code only after the .set() call has been returned, then you can take advantage of the fact that $http methods return promises, like so:

$user.set().then(function(){
  // This code runs *after* the call has returned.
  $scope.currentUser = $user.fetch()
  console.log($scope.currentUser.name) //<- "Ed"
});