Eu tenho quatro cabeçalhos de tabela:

$scope.headers = ["Header1", "Header2", "Header3", "Header4"];

E quero poder classificar minha tabela clicando no cabeçalho.

Então, se minha mesa se parece com isso

H1 | H2 | H3 | H4
A    H    D   etc....
B    G    C
C    F    B
D    E    A

e clico em

H2

minha mesa agora se parece com isso:

H1 | H2 | H3 | H4
D    E    A   etc....
C    F    B
B    G    C
A    H    D

Ou seja, o conteúdo de cada coluna nunca muda, mas ao clicar no cabeçalho para o qual quero ordenar as colunas, as linhas se reordenarão.

O conteúdo da minha tabela é criado por uma chamada de banco de dados feita comMojolicious e é devolvido ao navegador com

$scope.results = angular.fromJson(data); // This works for me so far

O resto do código que eu montei parece algo como isto:

<table class= "table table-striped table-hover">
    <th ng-repeat= "header in headers">
        <a> {{headers[$index]}} </a>
    </th>
    <tr ng-repeat "result in results">
        <td> {{results.h1}} </td>
        <td> {{results.h2}} </td>
        <td> {{results.h3}} </td>
        <td> {{results.h4}} </td>
    </tr>
</table>

Como faço para encomendar as colunas a partir deste ponto, apenas clicando no cabeçalho no topo da tabela?