Performance of ng-repeat

Question

I have an application with a code completion editor. When the user starts typing, an array proposal is created and displayed. The creation of the array goes very fast, almost instant. Worst case the array has a length of around 500 items.

The problem is that the array constantly changes value as the user is typing. The rendering of the ng-repeat is taking about 1-2 seconds which is a huge delay during typing. I don't really understand why this is a problem, in terms of computing an array of 500 items is peanuts.

I'd rather not limit the array because the user can scroll through it. Are there any other suggestions to speed things up?

<li ng-repeat="proposal in proposals"  ng-dblclick="copyProposal()" ng-class="{selected : proposal.selected}">
    <img src="assets/img/key.png" ng-show="proposal.isKey" class="icon"/>
    {{proposal.text}} 
    <span ng-show="proposal.type" class="detail">- {{proposal.type}}</span>
</li>

Answer 1

In addition to track by, you can use single-way binding instead of double binding to reduce watchers :

ng-repeat="proposal in proposals track by proposal.id" 
{{::proposal.text}}
{{::proposal.type}}

Another thing you can look into (if you use ng-model somewhere, like your text input) is ng-model-options debounce property. You can specify a delay after which the model update is done. For example set debounce to 500ms so that it doesn't update multiple times if the user types in quick succession.

ng-model-options="{ debounce: 500 }"

(Angular >= 1.3)