AngularJS Example

HTML

<div ng-app="">
  <div ng-init="predicate='name'; reverse=false;">Sort: predicat:{{predicate}} reverse:{{reverse}} </div>
  <div ng-click="reverse=!reverse">[change reverse]</div>
  <div ng-click="predicate='name'; reverse=!reverse;">[set predicate: name + change reverse]</div>
  <div ng-click="predicate='id'; reverse=!reverse;">[set predicate: id + change reverse]</div>
  <div ng-init="lines=[{'name':'eee', 'id':7}, {'name':'aaa', 'id':9}, {'name':'ccc', 'id':8}, {'name':'bbb', 'id':2}, {'name':'ddd', 'id':3}]">
      <ul ng-repeat="line in lines | orderBy:predicate:reverse" ng-class-odd="'odd'" ng-class-even="'even'">
          <li >{{ line.name }}</li>
      </ul>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }
.odd { background-color: red; }
.even { background-color: green; }