title: AngularJS Directive for table header
body: <p>I am trying to write a directive to deal with changing an icon class for table headers.  What I would like is (what I believe anyway) the standard way of dealing with sorting by table headers.  The directive would add a link element and upon a user's click sort by desc and change the icon to desc, upon click again sort by asc and once again the the icon.  Here is what I have so far, but I am now at a loss for how to deal with the icon class as well as resetting other elements on the same table but outside of the directive's scope.  Any help would be great!</p>
  
  <pre><code>angular.directive("tableHeaders", function() {
  return {
      restrict: 'E',
      scope: {},
      template:'&lt;i class="glyphicon glyphicon-filter"&gt;&lt;/i&gt;',
      link: function(scope, element, attrs) {
          attrs.class = 'glyphicon glyphicon-sort-by-alphabet-alt';
      }
  }
  });
  </code></pre>
  
  <p>Here is what I have for the html side:</p>
  
  <pre><code>&lt;th&gt;First Name&lt;a ng-click="newOrderBy('_firstName')"&gt;&lt;table-headers&gt;&lt;/table-headers&gt;&lt;/a&gt;&lt;/th&gt;
  &lt;th&gt;Last Name&lt;a ng-click="newOrderBy('_lastName')"&gt;&lt;table-headers&gt;&lt;/table-headers&gt;&lt;/a&gt;&lt;/th&gt;
  &lt;tr ng-repeat="item in items | orderBy:orderBy:reverse&gt;
  &lt;td&gt;{{item._firstName}}&lt;/td&gt;
  &lt;td&gt;{{item._lastName}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The order by is currently handled in the controller:</p>
  
  <pre><code>   $scope.newOrderBy = function(order) {
          $scope.orderBy = order;
          $scope.reverse = !$scope.reverse;
      };
  </code></pre>