title: AngularJS sorting rows by table header
body: <p>I have four table headers:</p>
  
  <pre><code>$scope.headers = ["Header1", "Header2", "Header3", "Header4"];
  </code></pre>
  
  <p>And I want to be able to sort my table by clicking on the header.</p>
  
  <p>So if my table looks like this</p>
  
  <pre><code>H1 | H2 | H3 | H4
  A    H    D   etc....
  B    G    C
  C    F    B
  D    E    A
  </code></pre>
  
  <p>and I click on</p>
  
  <pre><code>H2
  </code></pre>
  
  <p>my table now looks like this:</p>
  
  <pre><code>H1 | H2 | H3 | H4
  D    E    A   etc....
  C    F    B
  B    G    C
  A    H    D
  </code></pre>
  
  <p>That is, the content of each column never changes, but by clicking on the header I want to order the columns by, the rows will reorder themselves.</p>
  
  <p>The content of my table is created by a database call done with <a href="https://en.wikipedia.org/wiki/Mojolicious" rel="noreferrer">Mojolicious</a> and is returned to the browser with</p>
  
  <pre><code>$scope.results = angular.fromJson(data); // This works for me so far
  </code></pre>
  
  <p>The rest of the code I have cobbled together looks something like this:</p>
  
  <pre><code>&lt;table class= "table table-striped table-hover"&gt;
      &lt;th ng-repeat= "header in headers"&gt;
          &lt;a&gt; {{headers[$index]}} &lt;/a&gt;
      &lt;/th&gt;
      &lt;tr ng-repeat "result in results"&gt;
          &lt;td&gt; {{results.h1}} &lt;/td&gt;
          &lt;td&gt; {{results.h2}} &lt;/td&gt;
          &lt;td&gt; {{results.h3}} &lt;/td&gt;
          &lt;td&gt; {{results.h4}} &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How do I order the columns from this point, just by clicking on the header at the top of the table?</p>