Angular $q and $http for data binding not working

Question

I'm trying to make a basic data pulling using a service and print it on screen when I have data, but something is not working.

My service:

mymodule.factory('MyService', function($http, $q) {
    var service = {
        getData: function() {
            var dfd = $q.defer();
            $http.get(apiServerPath).success(function (data) {
                dfd.resolve(data);
            });
            return dfd.promise;
        }
    }

    return service
}

My Controller:

mymodule.controller('myCtrl', ['$scope', 'MyService', function($scope, MyService) {
     $scope.myvar = MyService.getData();
}

HTML

<div> {{myvar}} </div>

What I can see from the browser console -

The myvar object turn into a promise object
The success function is being called and 'data' has valid data in it
And for my question and issue - the controller's variable does not change when the defer object is resolving - why?

You can't use promises inside views. {{ myVar }} should reference the result of the promise, not the promise itself. — JB Nizet, Nov 02 '14 at 15:39
See http://stackoverflow.com/questions/23803743/what-is-the-deferred-anti-pattern-and-how-do-i-avoid-it — Benjamin Gruenbaum, Nov 02 '14 at 15:57

score 5 · Answer 1 · answered Nov 02 '14 at 15:40

Promises are no longer auto-unwrapped as of Angular 1.2. In your controller do the following:

mymodule.controller('myCtrl', ['$scope', 'MyService', function($scope, MyService) {
     MyService.getData().then(function success(data) {
       $scope.myvar = data;
     });
}

Angular $q and $http for data binding not working

1 Answers1