Mam cztery nagłówki tabel:

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

I chcę móc sortować mój stół, klikając nagłówek.

Więc jeśli mój stół wygląda tak

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

i klikam

H2

moja tabela wygląda teraz tak:

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

Oznacza to, że zawartość każdej kolumny nigdy się nie zmienia, ale przez kliknięcie nagłówka chcę zamówić kolumny według, wiersze będą się zmieniać.

Zawartość mojej tabeli jest tworzona przez wywołanie bazy danychŻyczliwy i jest zwracany do przeglądarki za pomocą

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

Reszta kodu, który razem wybrukowałem, wygląda mniej więcej tak:

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

Jak zamówić kolumny od tego miejsca, po prostu klikając nagłówek u góry tabeli?