Limit datalist value - AngularJS

Question

I am trying to render around 2000 values(through an API call) using DataList in AngularJS. The issue is that these values make the page so slow. Is there a way I can render only 10 items at a time and since its a datalist, probably show matching results to a limit of 10 when we type.

Here is my codepen: https://codepen.io/anon/pen/KyEXMr

<main ng-app="myApp">
  <section ng-controller="dataListController">
    <form name="some">
      <label> Search
   <input type="text" list="dataList">
      </label>
      <datalist id="dataList">
        <option ng-repeat="v in names" value="{{v.eyeColor}}">Age {{v.age}}</option>
      </datalist>
    </form>
  </section>
</main>

Answer 1

You can add an ng-if="$index < 10" to the option attribute. This will only render the items in with an index less than 10, and will still respect your text filter. LimitTo is returning a new array with only the 10 items in it, causing the text filter to not find your items.