AngularJS controller using factory function

Question

I have a following code where controller use factory function to get user data via an api request.

controller

myApp.controller('UserApiCtrl', function($scope,$auth,Account){

    $scope.getProfile = function(){
        Account.getProfile()
            .then(function(response){

                $scope.user = response.data;

            })

            .catch(function(response){
                // errors handled here
            })
    };

    $scope.getProfile();

})

factory

angular.module('MyApp')
    .factory('Account', function($http){
        return {
            getProfile: function(){
                return $http.get('/api/me');
            }
        }
    });

Now in controller when I console.log(response.data) , json data is available, but when I console.log($scope.getProfile()) it's undefined.

Thanks!!

Answer 1

Here is the answer, read the below point to understand the concept.

1. You are assigning value into scope variable $scope.user , So you can do logging for it.
2. You are getting response back in success, so again you can log here also.

But when you try to log console.log($scope.getProfile()) , it is not going to return anything. In angular every thing you can keep in scope object.

Answer 2

If you get response.data then below code should work fine.

myApp.controller('UserApiCtrl', function($scope,$auth,Account){
    $scope.user = {}; // Change to [] if response.data is array
    $scope.getProfile = function(){
        Account.getProfile()
        .then(function(response){
            $scope.user = response.data;
            console.log($scope.user);
        })
        .catch(function(response){
                // errors handled here
            })
    };
    $scope.getProfile();
});