AngularJS ngRepeat not respecting limitTo filter

Question

I'm using ng-repeat on a list item to display available supermarket items. The items are retrieved using $http as JSON and stored in $scope.items, and ng-repeat is working fine to display all of them. My problem is that there are 20 of these items, and I want to limit the number displayed to, say, 3. I'm trying to use a limitTo filter to no avail. Here's a screenshot showing the displayed items but with no limit, despite the filter being specified:

https://i.sstatic.net/Ogyrq.png

My html is as follows:

<span class="item-choices-choice pull-left">
    <ul>
         <li ng-repeat="choice in items.0 | limitTo:3">
             <img src="{[{ choice.ImagePath }]}" class="img-rounded" /> {[{ choice.Name }]} <strong>{[{ choice.Price }]}</strong>
         </li>
    </ul>
</span>

Thanks for any help

EDIT:

I will try to explain a few more things: I've re-assigned {{ to {[{ in AngularJS as it conflicts with Twig otherwise.

items is set up as an array in the controller:

$scope.items = [];

Here's the JSON I receive from the AJAX request:

http://pastebin.com/ZN6ipRKQ

This JSON gets interpreted by $http and assigned to $scope.items[0]. AngularJS seems to be working fine in every case apart from this one.

Answer 1

I have found the problem.

It seems, if you json_encode an ArrayIterator in PHP, it will encode it as an object within an object instead of an object in an array. This seems to cause the issue with the limitTo (and other) filters in Angular not working properly.

After converting the ArrayIterator to a normal PHP array and running json_encode, the limiting works absolutely fine.

Answer 2

Your interpolation syntax is wrong. You have square brackets between your curly braces.

<img src="{[{ choice.ImagePath }]}" class="img-rounded" /> {[{ choice.Name }]} <strong>{[{ choice.Price }]}</strong>

needs to become

<img src="{{ choice.ImagePath }}" class="img-rounded" /> {{ choice.Name }} <strong>{{ choice.Price }}</strong>

After I fix that, it works for me in this codepen.