Tengo cuatro cabeceras de mesa:

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

Y quiero poder ordenar mi tabla haciendo clic en el encabezado.

Así que si mi mesa se ve así

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

y hago clic en

H2

Mi mesa ahora se ve así:

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

Es decir, el contenido de cada columna nunca cambia, pero al hacer clic en el encabezado por el que quiero ordenar las columnas, las filas se reordenarán.

El contenido de mi tabla es creado por una llamada de base de datos hecha conMojolicious y se devuelve al navegador con

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

El resto del código que he acumulado se ve algo así:

<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>

¿Cómo ordeno las columnas desde este punto, simplemente haciendo clic en el encabezado en la parte superior de la tabla?