Angular Scope Not Printing Variables

Question

I have an angular factory and controller as such:

angular.module('myApp', ['ui.router', 'ngResource'])
.factory('Widget', ['$http', function WidgetFactory($http) {
    return {
        all: function() {
            return $http({method: "GET", url: "/widgets"});
        }
    };
}])
.controller('StoreCtrl', ['$scope', 'Widget', function($scope, Widget) {
    $scope.widgets = Widget.all();
}]);

In my front-end I have

<div ng-controller="StoreCtrl">
    <li ng-repeat="widget in widgets">
        {{ widget.price }}
        {{ widget.name }}
    </li>
</div>

But nothing gets populated in my {{ widget.price }} and etc.
What am I missing?

print $scope.widgets in your controllers check whether it contains data or not — Hassan Tariq
– Hassan Tariq, Commented Mar 9, 2016 at 4:54
your can see your data if data is available by using this line console.log($scope.widgets); or use debugging mode in your browser. — Mahfuz Ahmed
– Mahfuz Ahmed, Commented Mar 9, 2016 at 5:08
There is data available. It's an array of objects. But the objects properties do not appear in their {{ widget.name }} in the ng-repeat. — gh0st
– gh0st, Commented Mar 9, 2016 at 5:13
its not a good practice but for now instead of $scope use $rootScope and try. — Vishal Singh
– Vishal Singh, Commented Mar 9, 2016 at 5:14

scniro · Accepted Answer · 2016-03-09 14:57:30Z

You are not quite resolving your promise as the framework expects. Check out the $q docs for some explanation on promises. We also need to set our view model value (scope) to the correct returned value from the response object, composed of the following...

data – {string|Object} – The response body transformed with the

transform functions. status – {number} – HTTP status code of the

response. headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate

the request. statusText – {string} – HTTP status text of the response.

Observe the following...

Widget.all().then(function (response) {
    $scope.widgets = response.data;
});

Furthermore, as a few observations, there is no need to name your factory function as you did with WidgetFactory, an anonymous function will do. You can also leverage the $http shortcut method get as well as such...

.factory('Widget', ['$http', function($http) {
    return {
        all: function() {
            return $http.get('/widgets');
        }
    };
}]);

varun · Accepted Answer · 2016-03-09 04:47:49Z

2

$http returns a promise. You need to assign the response data to $scope.widgets when the promise resolves. In the controller, try this:

Widget.all().then(function (data) {
    $scope.widgets = data;
});

answered Mar 9, 2016 at 4:47

varun

6624 silver badges5 bronze badges

13 Comments

gh0st Over a year ago

So I got the same result. But I can't access the values inside of widgets when I ng-repeat="widget in widgets" and do {{ widget.name }}

scniro Over a year ago

this seems to be the most helpful answer here, since you need to resolve a promise to get your results. There is no need to call $apply, since we're entirely in the context of angular with this code in question. @gh0st it sounds like you're missing something minor, is there a css class affecting one of the <li> elements or something to alter it's visibility?

scniro Over a year ago

Also for the sake of verbosity in your example above, perhaps assign your var to data.data. That's generally a bad param name for the callback, you'll typically see response.data, for there is usually a data property on the returned object

gh0st Over a year ago

@scniro the $scope.widgets = data.data did the trick. Thank you. Finally someone who knows what they're talking about. If you post your comment as an answer I will mark it.

scniro Over a year ago

@gh0st for completeness I posted my answer, along with some minor suggestions

|

Mahfuz Ahmed · Accepted Answer · 2016-03-09 05:05:55Z

0

First make sure you have an objects of Array at

  $scope.widgets;

in your controller. you can print this line in your controller

console.log($scope.widgets);

to see if the data is available or not.

answered Mar 9, 2016 at 5:05

Mahfuz Ahmed

7199 silver badges23 bronze badges

1 Comment

Mahfuz Ahmed Over a year ago

Can you see the data in controller ?

Collectives™ on Stack Overflow

Angular Scope Not Printing Variables

3 Answers 3

Comments

13 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related