Search code examples
angularjslistangularjs-ng-repeatunordered

AngularJS ng-repeat and scope populated within http call results in empty html elements

I have defined an array within scope:

$scope.foo = [];

I then make a $http call, and populate that variable from the success event in my controller.

In the template i have an unordered list as such:

<ul>
 <li ng-repeat="i in foo">{{i}}</li>
</ul>

The outcome is an unordered list that has as many li elements as $scope.foo, but the contents of it are empty:

<li ng-repeat="i in foo" class="ng-scope"></li>
<li ng-repeat="i in foo" class="ng-scope"></li>
<li ng-repeat="i in foo" class="ng-scope"></li>
.
.
.

I can see that the array has been populated. Furthermore the LI element count matches the array length (as expected), but the contents of the LI are empty.

All documentation i can find looks like this for populating an unordered list. I previously changed it from a jQuery call to an angular $http.post call since some problems with scoping would arise from that.

Why are the contents of the li elements empty?

Solution

  • If you made $scope.foo = []; then use foo not range.

    Example:

    <li ng-repeat="i in foo" class="ng-scope">{{i}}</li>
<li ng-repeat="i in foo" class="ng-scope" ng-bind="i"></li>

    Edited to fix my mistake, thanks for tip.