title: Ui-grid - How to sort and hide a column on click of respective ui-icons
body: <p>I need to sort and hide the respective column on click of the respective ui-icons.</p>
  
  <p>ui-icon-close  -> On click of this, respective column should be made hidden.
  ui-icon-arrowthick-2-n-s -> On click of this icon, table should be sorted with respect to the values of that column.</p>
  
  <p>Here is the plunker <a href="http://plnkr.co/edit/J6XnIAb7E3MZe62Ixax3?p=preview" rel="nofollow">link</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="grid1" ui-grid="gridOptions1" class="grid"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$scope.gridOptions1 = {
      enableSorting: true,
      columnDefs: [
        { field: 'name', headerCellTemplate: '&lt;div style="float:left"&gt;Name&lt;/div&gt;&lt;div class="ui-icon ui-icon-close" style="float:left"&gt;&lt;/div&gt;&lt;div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/div&gt;' }, 
        { field: 'gender', headerCellTemplate: '&lt;div style="float:left"&gt;Name&lt;/div&gt;&lt;div class="ui-icon ui-icon-close" style="float:left"&gt;&lt;/div&gt;&lt;div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/div&gt;' },
        { field: 'company', headerCellTemplate: '&lt;div style="float:left"&gt;Name&lt;/div&gt;&lt;div class="ui-icon ui-icon-close" style="float:left"&gt;&lt;/div&gt;&lt;div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/div&gt;'}
      ],
      onRegisterApi: function( gridApi ) {
        $scope.grid1Api = gridApi;
      }
    };
  </code></pre>