ng-repeat with track by and filter and orderBy not working

Question

I have this code.

http://jsfiddle.net/0tgL7u6e/

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.nameFilter = '';
    $scope.contacts = [
        {name: 'GHI'},
        {name: 'DEF'},
        {name: 'ABC'},
        {name: 'JKL'}
    ];
}

View

<div ng-controller="MyCtrl">
    <div><input type="text" ng-model="nameFilter" placeholder="Search..." /></div>
    <p ng-repeat="contact in contacts track by $index | filter: nameFilter | orderBy: name">{{ contact.name }}</p>
</div>

I don't know why the order is not working and why the filter is not working.

At another question, I've read about something that objects can't be filtered or ordered. But I have an array of the objects above. Also, it should work!?

What's the problem?

Solution

To use tracking with filters, the track by expression has to be added after the filter.

<p ng-repeat="contact in contacts | orderBy: 'name' | filter: nameFilter  track by $index">{{ contact.name }}</p>

Here is the working fiddle

Comments

[naeramarth7]

It does matter. Without the quotes, it will look for the content of $scope.name which does not exist. A jsfiddle of your version: jsfiddle.net/saw1uLs9

[PatrickB]

No! :D It can't be sooooo easy? But it works :D Thank you very much!

[PatrickB]

Interesting! Thanks for this example without quotes.

[Sayan]

Of all the similar questions, this is the most apt answer!

[Ibrahim.H]

Samething to say for orderBy clause.