title: Sortable table columns with AngularJs
body: <p>I'm trying to sort a table of data which is populated from a JSON source.  The code I have is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="PurchasesCtrl"&gt;
          &lt;table cellspacing="0"&gt;
              &lt;tr class="first"&gt;
                  &lt;th class="first" ng:click="changeSorting(purchases.date)"&gt;Date&lt;/th&gt;
                  &lt;th ng:click="changeSorting(purchases.text)"&gt;Description&lt;/th&gt;
                  &lt;th ng:click="changeSorting(purchases.price)"&gt;Amount&lt;/th&gt;
                  &lt;th ng:click="changeSorting(purchases.availability)"&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr ng-repeat="purchase in purchases.data"&gt;
                  &lt;td class="first"&gt;{{purchase.date}}&lt;/td&gt;
                  &lt;td&gt;{{purchase.text}}&lt;/td&gt;
                  &lt;td&gt;{{purchase.price}}&lt;/td&gt;
                  &lt;td&gt;{{purchase.availability}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module("myApp",[]);
  
  myApp.factory("Purchases", function(){
      var Purchases = {};
  
      Purchases.data = [
          {
              date: "10/05/2012",
              text: "1 Lorem ipsum dolor sit amet ipsum dolor",
              price: "£123.45",
              availability: "1 Available until 10th Dec 2013"
          },
          {
              date: "24/05/2012",
              text: "2 Lorem ipsum dolor sit amet ipsum dolor",
              price: "£234.56",
              availability: "2 Available until 10th Dec 2013"
          },
          {
              date: "20/05/2012",
              text: "3 Lorem ipsum dolor sit amet ipsum dolor",
              price: "£345.67",
              availability: "3 Available until 10th Dec 2013"
          }
      ];
      return Purchases;
  });
  
  function PurchasesCtrl($scope, Purchases){
      $scope.purchases = Purchases;
  
      $scope.changeSorting = function(column) {
          var sort = $scope.sort;
  
          if (sort.column == column) {
              sort.descending = !sort.descending;
          } else {
              sort.column = column;
              sort.descending = false;
          }
      };
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/7czsM/1/">http://jsfiddle.net/7czsM/1/</a></p>
  
  <p>As you can see I've tried to add a click function to the table headers to call a function that sorts the data, but it's not working.  </p>
  
  <p>I've seen an example of this kind of thing which does work, here: <a href="http://jsfiddle.net/vojtajina/js64b/14/">http://jsfiddle.net/vojtajina/js64b/14/</a>, but when I try to apply the same kind of thing to my scenario it breaks very quickly; for example, I tried adding the table headers programatically in JSON by adding the following:</p>
  
  <pre><code>var Purchases = {};
  
  Purchases.head = [
          {
              date: "Date",
              text: "Text column",
              price: "Price column",
              availability: "Availability column"
          }
  
      Purchases.data = [
          {
              date: "10/05/2012",
              text: "1 Lorem ipsum dolor sit amet ipsum dolor",
              price: "£123.45",
              availability: "1 Available until 10th Dec 2013"
          },
  </code></pre>
  
  <p>This just prevents anything from working, but I thought it would be possible to add multiple sets of data to an Angular variable?</p>
  
  <p>I'm a total new-comer to Angular so I'm really stuck with this.  Any pointers would be much appreciated, thanks.</p>