Service being called multilple times in Angular

Question

I have the following angular service

//SERVICES
app.service('userInfo', function($http){
    this.getInfo = function() {

        var BASE_URL = "";
        var requestUrl = BASE_URL + "/getmyproperties";
        return $http({ 
                    'method': 'GET',
                    'url': requestUrl,
                    'headers': { "Accept": "application/json; odata=verbose"}
                }).then(function(response){
                    console.log(response.data.d);
                    var userName = response.data.d.DisplayName.split(',');

                    var data = {
                        firstName: userName[1],
                        userImage: response.data.d.PictureUrl,
                        lanID: response.data.d.AccountName
                    };

                    return data;

                }).catch(function(e){
                    console.log("Error: ", e);
                }); 
    }
});

Maybe i've misunderstood services as i am just learning Angular, but i want to be able to now use the data.UserName in multiple places in the app, so i thought i could use a service, but the service function is executed twice - which i don't want, how can i take the value and then use it everywhere? Should i use nested controllers?

//NAV CONTROLLER
app.controller('navBarController', function($scope, userInfo) {
    userInfo.getInfo().then(function(data) {
        $scope.user = data;
    });
});
//END NAV CONTROLLER

//TASK CONTROLLER
app.controller('taskController', function($scope, userInfo) {
    userInfo.getInfo().then(function(data) {
        $scope.test = data;
    });
});

Answer 1

The getInfo method is calling a webservice. So everytime you call the method, the webservice is called. A solution would be to store the info into a variable in the userInfo service once you got it from the webservice. Then in getInfo you first check if the info is allready loaded. If yes, return it. If no, call the webservice. A quick example of how this could look:

app.service('userInfo', function($http){
    var userInfo = undefined;
    this.getInfo = function() {
        var BASE_URL = "";
        var requestUrl = BASE_URL + "/getmyproperties";
        if(userInfo) {
            var deferred = $q.defer();
            deferred.resolve(userinfo); 
            return deferred.promise;
        }
        return $http({ 
                'method': 'GET',
                'url': requestUrl,
                'headers': { "Accept": "application/json; odata=verbose"}
            }).then(function(response){
                console.log(response.data.d);
                var userName = response.data.d.DisplayName.split(',');

                userInfo = {
                    firstName: userName[1],
                    userImage: response.data.d.PictureUrl,
                    lanID: response.data.d.AccountName
                };

                return userInfo;

            }).catch(function(e){
                console.log("Error: ", e);
            }); 
    }
});