Angular using limitTo and Filter

Question

I have a list of 2,000 elements, that I created with angular in the following way:

    <tr ng-repeat="elem in elements | limitTo:limitSize | filter:searchTerm |
 orderBy:predicate:reverse">

I am using a scroll event that changes the limitSize on scroll.

I also have a searchTerm that I can search for an elem in the given elements that looks like the following:

    <input class="search" style="margin-top: 20px;" 
placeholder="Search" type="text" ng-model="searchTerm" />

When I search an elem in the visible list it's of course working, but when I search for elem that is not currently visible, it returns an empty list.

I am using limitTo because I don't want to render the whole 2,000 list on page load.

What are my options? Am I doing something wrong?

Thanks, Omri

Answer 1

 <tr ng-repeat="elem in elements | filter:searchTerm | limitTo:limitSize | 
 orderBy:predicate:reverse">

should call the filter First then the limitTo