ng-filter not apply

Question

ng-filter not apply

<div ng-app="streams">
    <div ng-controller="streamsList">
        <ul class="streamsList">
            <li class="streamsListItem" ng-repeat="(streamer, viewers) in streamerItems | limitTo:5">
                <h2>{{streamer | uppercase}}</h2>
                <span>{{viewers}}</span>
            </li>
        </ul>
    </div>
</div>

Uppercase is working, but LimitTo not working. Did some one Help? Maybe it problem in (streamer, viewers)?

Here JSON:

{
    "Liquidixmike88": 1721,
    "DotaCinema": 746,
    "EternaLEnVyy": 649,
    "starladder1": 562,
    "Anuxinamoon": 165,
    "glhf_Reaves": 157,
    "Anzecha": 135
}

javascript
angularjs

Answer 1

Because limitTo filter works only with arrays:

CTRL:

function($scope) {
  $scope.streamerItems = [
    {nick: "TopGun", viewers: 1822},
    {nick: "Liquidixmike88", viewers: 1721},
    {nick: "DotaCinema", viewers: 746},
    {nick: "DotaCinema1", viewers:732},
    {nick: "EternaLEnVyy", viewers: 649},
    {nick: "starladder1", viewers: 562},
    {nick: "Anuxinamoon", viewers: 165},
    {nick: "glhf_Reaves", viewers: 157},
    {nick: "Anzecha", viewers: 135}
  ];

}

VIEW:

<ul class="streamsList">
  <li class="streamsListItem" ng-repeat="streamer in streamerItems | limitTo:5">
    <h2>{{streamer.nick | uppercase}}</h2>
    <span>{{streamer.viewers}}</span>
  </li>
</ul>

Demo plunker.