AngularJS 'ng-filter' is very slow on array of ~1000 elements -

i have simple <input> search filter set list of itemnames in angularjs.

my list looks this:

var uniquelists = {     category1: ['item1', 'item2', 'item3' ... 'item180' ], // real list contains ~180 items     category2: ['itema', 'itemb', 'itemc' ... 'itemzzz' ], // real list contains ~1080 items     category3: ['otheritem1', 'otheritem2', 'otheritem3' ]  // real list contains 6 items   } 

i iterate through list in angular , print out results in <ul> each category.

<div ng-repeat="(key,val) in uniquelists">     <form ng-model="uniquelists[index][0]">         <input ng-model="searchfilter" type="text" />             <ul>                 <li ng-repeat="value in val | filter: searchfilter">                     <label>                          <input type="checkbox" ng-model="selecteddata[key][value]" />                         {{value}}                     </label>                 </li>             </ul>     </form> </div> 

for clarity, selecteddata looks this:

var selecteddata = {category1: [item1:true], category2: [], category3: []); // if 'item1's checkbox checked. 

this list working fine, although filter quite laggy, on quite-fast computer. typing letter input takes 1-2 seconds list update.

i'm aware because i'm filtering through around 1000 items @ time, haven't seen discussion of elsewhere.

is there way better performance out of filter?

the main problem filter approach upon each change dom manipulated, it's not filter that's slow consequences. alternative use like:

ng-show="([item] | filter:searchfilter).length > 0" 

on repeated element.

lending code @overzealous, can use following compare behaviour:

• filter: http://jsbin.com/fuwadanu/1/
• ng-show: http://jsbin.com/xajehulo/1/

---

update: angular v1.2 came track by syntax. helps such problems. provided elements have unique attribute, 1 can use:

ng-repeat="item in items | filter:searchfilter track item.id" 

where item.id has unique across items. track by dom-elements removed no longer in final list, others remembered. whereas without track by whole list redrawn everytime. in short: less dom manipulation = quicker redraw.

• track by: http://jsbin.com/dufasego/1/