AngularJS: Using 'track by' disables filter in ng-repeat

Question

Since I implemented track by into ng-repeat , it prevents my filter from executing. For example, track by $index works like a charm but when I try to add an input field to search my object, nothing happens and the console does not show any error.

Here is my html:

<input type="text" ng-model="searchText">
<div ng-repeat="message in messages.collection track by $index | filter : searchText">
  <p>{{message.text}}</p>
</div>

I also created a Plunkr in order to show both cases (with and without track by ).

I would like to know if it is a syntax problem or something else in order to fix it.

Answer 1

You need to add track by at the end of the expression. See this working plunkr .

Code:

<div ng-repeat="message in messages.collection | filter : searchText track by $index">
    <p>{{message.text}}</p>
</div>

Answer 2

Please rather try to track by on the filter

message in messages.collection  | filter : searchText track by $index

As suggested on https://docs.angularjs.org/api/ng/directive/ngRepeat

Best