CODEWITHSUNDEEP
javascriptangularjsangular-resource
neptune
neptune

Reputation: 1261

Angular $scope not set after factory returned data

I have an Angular app with a factory and a controller:

.factory('dogeFactory', ['$resource', function ($resource) {
    var dogeResource = $resource("https://dogechain.info/api/v1/address/balance/:address");
    return {
        balance: function(address){
            return dogeResource.get({address: address}).$promise
            .then(
                function(data){ 
                    return data.balance;
                }
            );
        },
    }
}])

.controller('TwoController', function($scope, dogeFactory){
    $scope.balance = dogeFactory.balance('D8EyEfuNsfQ3root9R3ac54mMcLmoNBW6q').then(
    function(data){
        console.log(data);
        return data;
    });

The console.log(data); in the controller shows the correct data, but when I call {{balance}} in the view, it shows {}.

Here is the issue on jsfiddle

Why $scope.balance isn't set properly with the data?

Upvotes: 1

Views: 52

Answers (1)

Daniel A. White
Daniel A. White

Reputation: 190935

Since balance is async, you can't directly return from it. You need to set your scope value in the then callback.

dogeFactory.balance('D8EyEfuNsfQ3root9R3ac54mMcLmoNBW6q').then(function(data){
    console.log(data);
    $scope.balance = data;
});

Upvotes: 4

Related Questions