Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="MyCtrl"> <a href="#" ng-click="predicate='name'">By name</a>
 <a href="#" ng-click="predicate='age'">By age</a>
 <a href="#" ng-click="predicate='salary'">By salary</a>

    <ul ng-repeat="card in cards | orderBy:predicate">
        <li><span ng-show="selectedIndex == $index">-->
          </span> {{card.name}}, {{ card.age }}, {{ card.salary }}</li>
    </ul> <a href="#" ng-click="nextItem()">Next item</a>

    <div>data loaded for {{ lastData }}</div>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.cards = [{
        name: 'Jack',
        age: 25,
        salary: 2500
    }, {
        name: 'Jim',
        age: 18,
        salary: 6000
    }, {
        name: 'Jane',
        age: 54,
        salary: 1500
    }, {
        name: 'Josie',
        age: 60,
        salary: 3500
    }];

    $scope.selectedIndex = 0;

    $scope.nextItem = function () {
        $scope.selectedIndex++;
        if ($scope.selectedIndex >= $scope.cards.length) {
            $scope.selectedIndex = 0;
        }
        // How to locate the correct lastData when the list is sorted??
        $scope.lastData = $scope.cards[$scope.selectedIndex].name;
    }
}