How to sort dynamically?

[Frankistan]

I have the following structure:
3 buttons which change (in theory) the key to orderBy the "isotope-items" and the list w/ ng-repeat as follows:
// FILE notes.html

<div id="sorts" class="button-group">
    <button data-sort-by="[data-id]" ng-click="order('id')" data-sort-ascending="{{reverse}}">id</button>
    <button data-sort-by="[data-title" ] ng-click="order('title')" data-sort-ascending="{{reverse}}">title</button>
    <button data-sort-by="[data-date]" ng-click="order('updated_at')" data-sort-ascending="{{reverse}}">date</button>
</div>
<ul id="container" isotope-container>
    <li ng-repeat="Note in Notes | filter: search | orderBy:predicate:reverse" isotope-item class="isotope-item">
        <md-card data-id="{{ Note.id }}" class="element-item">
            <md-card-content>
                <h2 data-title="{{ Note.title }}" class="md-title">{{ Note.title }}</h2>
                <p data-date="{{Note.updated_at}}" class="time">{{Note.updated_at }}</p>
            </md-card-content>
        </md-card>
    </li>
</ul>
// FILE notes.js
angular.module('demo')
    .controller('NoteCtrl', [ ...., function(....) {
        /* Change notes' order */
        $scope.predicate = 'id';
        $scope.reverse = false;
        $scope.order = function(predicate) {
            $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
            $scope.predicate = predicate;
        };
     }
]);

So, what am I doing wrong? or am I missing something? because the animation when sorting is not firing.
What's the best practice to achive this?
Sorry, but I think the documentation about how use this directive is a bit incomplete
Thanks