angular select2 slow with largish data set

Question

I'm trying to use select2 with a dataset of 5,000.

The interaction is slow, especially the search. I will need to handle datasets of >500,000 sometime in the near future.

Any suggestions on how to make this efficient?

I have no performance issues with bootstrap typeahead, though granted, that has less functionality and display elements. I also don't know how the search functionality works with typeahead.

Here's the plunker example, same as the demo for select2, but with 5,000 rows of data http://plnkr.co/edit/RyCTTloW6xp81WvoCzkf?p=preview

<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
        <small>
            email: {{person.email}}
            age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
        </small>
    </ui-select-choices>
</ui-select>

Answer 1

I had the same problem. Ui-select has really poor performance. I suggest using Selectize. It behaves much better but I think 500k may be too much. Angular Material Virtual Lists can be the answer. They render only few options at the time and just updates bindings.