Angular ui-router resolve is calling function that returns object properly, but still ends up getting undefined. Why?

Question

I have a custom function that properly returns a cache object of user details. Additionally, the function checks to see if the cache is empty beforehand and makes an API call to retrieve the appropriate data if necessary. However, when I call this function from the angular ui-router resolve it still ends up getting undefined. I don't understand... because all my console printed statements within the custom function show that the correct object is being returned.

function getCache(UserService) {
    if(cacheIsEmpty) {
        UserService.getProfile().then(function (profile) {
            // check to see profile returned correctly
            console.dir(profile);

            // set cache using returned profile
            ...

            // create object loaded from cache
            var cacheObj = {
                firstName: // get from cache
                lastName:  // get from cache
                ...
            }

            // check if my object is correctly created
            console.log(cacheObj):

            // now return this correctly created object
            return cacheObj;

        });

    } else {

        // the following creates object directly from cache
        // since it is NOT empty and can be used
        var cacheObj = {
            firstName: // get from cache
            lastName:  // get from cache
            ...
        }

        // print to check object is correct
        console.dir(cacheObj);

        // now return it
        return cacheObj;
    }

}

And in the resolve, a call to this function returns as defined... despite the fact that the object is correctly being returned from the object.

...
resolve: {
    cacheObj: function(UserService) {

        // call the getCache function
        var returnedUserObject = getCache(UserService);

        // printing the object here shows that it is undefined
        console.log(returnedUserObject);

        // return the object to the controller
        return returnedUserObject;
    }
}

Answer 1

You should return a promise from getCache function, so that resolve recognise that till promise gets resolved I need to wait. Here you haven't returned a promise from if(cacheIsEmpty) method where you are making UserService.getProfile method call. Though returning data from promise from .then function doesn't mean you are returning promise.

Code

function getCache(UserService) {
    //return promise from both the places, if & else
    if(cacheIsEmpty) {
        //return promise here
        return UserService.getProfile().then(function (profile) {
            // check to see profile returned correctly
            console.dir(profile);

            // set cache using returned profile
            ...

            // create object loaded from cache
            var cacheObj = {
               firstName: // get from cache
               lastName:  // get from cache
               ...
            }
            //return cacheObj from here when promise resolved
            return cacheObj;
        });
    } else {
        //create cached cacheObj from cache and return it
        return $q.resolve(cacheObj)
    }
}

Resolve

resolve: {
    cacheObj: function(UserService) {
        return getCache(UserService);
    }
}