How to limit an array with 10,000 objects thats linked to my angular ui-select?

Question

I have an array with 10,000 objects in it and its crashing the browser every time I click on the select. Is there anyway to limit the ui-select to only show 10 on the screen at a time? Additionally, the library I am using is ui-select.

 <ui-select ng-model="ed.main.user.UserID.selected" theme="bootstrap">
     <ui-select-match placeholder="{{main.editTicket.UserDisplayName}}">
         {{$select.selected.DisplayName}}
     </ui-select-match>
     <ui-select-choices repeat="t in main.users |filter:$select.search"value="{{$selected.UserID}}">
         <div ng-bind-html="t.DisplayName | highlight: $select.search"></div>
         <small ng-bind-html="t.UserID | highlight: $select.search"></small>
     </ui-select-choices>
 </ui-select>

Answer 1

Check out limitTo e.g...

<select ng-model="model" ng-options="o as o for o in items | limitTo: 10"></select>

JSFiddle Link - demo

---

Per your update, modify your repeat as such

<ui-select-choices repeat="t in main.users | filter:$select.search | limitTo: 10"value="{{$selected.UserID}}">
    <div ng-bind-html="t.DisplayName | highlight: $select.search"></div>
    <small ng-bind-html="t.UserID | highlight: $select.search"></small>
</ui-select-choices>