Angular: Empty Fiddle

http://angularjs.org/

by mrajcok

HTML

<div ng-controller="MyCtrl">
  <table>
      <tr><th ng-repeat="header in headers">
          <a ng-click="$parent.sortColumn=headers[$index];$parent.reverse=!$parent.reverse">{{ headers[$index] }}</a></th>
      </tr>
      <tr ng-repeat="arr in records | orderBy:sortColumn:reverse">
          <td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]"></td>
      </tr>
    </table>
    sortColumn: {{sortColumn}}<br/>
    reverse: {{reverse}}
</div>

CSS

th, td { padding: 2px }

JavaScript

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

function MyCtrl($scope) {
    $scope.headers = ['col1', 'col2'];
    $scope.records = [{
        col1: 'a1',
        col2: 'd1'},
    {
        col1: 'c2',
        col2: 'b2'},
    {
        col1: 'b3',
        col2: 'c3'},
    {
        col1: 'd4',
        col2: 'a4'}];

    $scope.sortColumn = 'col1';
    $scope.reverse = true;
}