How to limit the objects in angularjs ng-repeat?

Question

My $scope values: I am getting array values in $scope.articles

Example: $scope.articles values looks like:

[
   {
    date: 'some', 
    category: [ {name: "Sports"}, {name: "News"}, {name: "Cinema"} ] 
   }
]

My table view: (jade)

table
  tbody
   tr
     th Date
     th Categories

   tr(ng-repeat='article in articles')
     td
       span {{ article.date }}
     td
      span(ng-repeat='cat in article.category') 
       span {{ cat.name}}

Plunkr: https://plnkr.co/edit/PW51BBnQEv589rIdnaCK?p=preview

This is working correctly, but if category array consists of more than 3 objects table become messy, So I want to limit the category, I want to display only 2 objects

For Example in UI I want to show the category Sports and News in the table, then I want to put this ..... dot type UI, if user hover near the ... dot, I want to show other category For Example Cinema

Answer 1

you are looking for limitTo

<div ng-repeat="item in cat in article.category | limitTo: 2">

Answer 2

You have to create a custom filter which give you the 2 record of the array & pass a skip limit in filter so you can get next 2 objects of array when click or hover dots...