AngularJS Factory Variable Becomes Undefined

Question

I have a user variable within a factory which keeps becoming undefined after switching controllers. I'm setting the variable in one controller. When I log user it appears with the data I'm expecting, but when I switch controllers and retrieve the variable it's undefined once again. Here is the code:

discussionBoard.factory('userFactory', function($http){

    console.log("I'm loading the userFactory");

    var user = {};

    var factory = {};

    factory.createUser = function(user, callback){
        $http.post('/users/new', {user: user})
            .success(function(response){
                user = response[0];
                callback(user);
            })
    }

    factory.retrieveUser = function(callback){
        callback(user);
    }

    console.log(user);

    return factory;

});

discussionBoard.controller('dashCtrl', function($scope, topicFactory, userFactory){

    $scope.createTopic = function(){
        topicFactory.createTopic(function(topic){
            $scope.topic = topic;
        })
    }

    userFactory.retrieveUser(function(user){
        $scope.user = user;
    });

});

EDIT: After a bit more experimenting I was able to get this to work by adding user as an object within the factory object. This actually raises another question, however, about how the factory is interacting with AJAX here, as it seems .success() doesn't have access to the factory's scope. Here's the code that worked, but I'd be curious if anyone could say why this is arranged in this way:

discussionBoard.factory('userFactory', function($http){

    var factory = {};

    factory.createUser = function(user, callback){
        $http.post('/users/new', {user: user})
            .success(function(response){
                factory.user = response[0];
                callback(factory.user);
            })
    }

    factory.user = {};

    factory.retrieveUser = function(callback){
        callback(factory.user);
    }

    return factory;

});

discussionBoard.controller('dashCtrl', function($scope, topicFactory, userFactory){

    $scope.createTopic = function(){
        topicFactory.createTopic(function(topic){
            $scope.topic = topic;
        })
    }

    userFactory.retrieveUser(function(user){
        $scope.user = user;
    });

});

Answer 1

You've shadowed your factory's user variable by giving the createUser function a parameter by the same name.

var user = {}; // <- this is going to be shadowed!

var factory = {};

factory.createUser = function(user, callback){ //<- note the user argument!
    $http.post('/users/new', {user: user})
        .success(function(response){
            user = response[0];
            callback(user);
        })
}

So when the success callback sets user , it finds the closest variable by that name, which is the param of the createUser function. Otherwise both approaches are perfectly fine - in fact the first one is better, if you want to make the user field only accessible through the getter (in the second case any controller could get a direct reference to user if the factory is injected).