title: Table headers with sort indicators
body: <p>I'm trying to create a simple grid in angularjs that supports sorting. I can't work out how to correctly create a sort indicator for each of my columns that is then bound to the <code>sortoptions</code> on the controller, so that when they change, the sort indicator also changes.</p>
  
  <p>My WIP is here: <a href="http://plnkr.co/edit/ZzPYY4ZTD8MvRIMWKEwP?p=preview" rel="nofollow">http://plnkr.co/edit/ZzPYY4ZTD8MvRIMWKEwP?p=preview</a></p>
  
  <p>I'm creating the table and wrapping it in a directive, so that I can set the binding on the controller for the <code>onSort</code> and the <code>sortoptions</code>:</p>
  
  <pre><code>  &lt;table&gt;
    &lt;tr&gt;
      &lt;thead columnwrap sortoptions="sortoptions" onsort="onSort"&gt;
        &lt;th&gt;&lt;column sortby='id'&gt;Id&lt;/column&gt;&lt;/th&gt;
        &lt;th&gt;&lt;column sortby='name'&gt;Name&lt;/column&gt;&lt;/th&gt;
      &lt;/thead&gt;    
    &lt;/tr&gt;
  </code></pre>
  
  <p>My wrapper directive is very simple and doesn't do much:</p>
  
  <pre><code>app.directive('columnwrap', function() {
    return {
      restrict: 'A',
      scope: {
        sortoptions : '=',
        onsort: '='
      }
  
    };
  });
  </code></pre>
  
  <p>My column directive is where all the magic should happen. In there, I'm tyring to get at <code>sortoptions</code>, but since that's declared on the parent directive, I'm not sure how to do that, and it all falls apart in the directive because of this.</p>
  
  <pre><code>app.directive('column', function() {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      scope: {
        sortby: '@'
      },
      template: "&lt;span&gt;&lt;a ng-click='sort' href='#' ng-transclude&gt;&lt;/a&gt;" +
      "&lt;span ng-show='sortby == sortoptions.sortby'&gt;" + // sortoptions does not exist, won't work
        "&lt;span ng-switch='sortoptions.sortdir'&gt;" + // again, no sortoptions
          "&lt;span ng-switch-when='asc'&gt; ▲&lt;/span&gt;" +
          "&lt;span ng-switch-when='desc'&gt; ▼&lt;/span&gt;" +
        "&lt;/span&gt;" +
      "&lt;/span&gt;&lt;/span&gt;",
      link: function(scope, el, attrs) {
  
        scope.sort = function() {
          // Want to check the sortoptions of the controller
          var sortDir = "desc";
          if (sortoptions.sortBy == attrs.sortby) {
            sortDir = sortoptions.sortBy == "asc" ? "desc" : "asc";
          }
          scope.$parent.onsort(scope.sortby, sortDir)
        }
      }
    };
  });
  </code></pre>
  
  <p>How can I access the sortoptions from the column directive, and have it so that when the sort column is clicked, all the column indicators update appropriately?</p>
  
  <p>Thanks!</p>