Column sort arrow directive

app.js.coffee

.controller 'CollectionsController', ($scope) ->
  $scope.sort_column  = 'created_at'
  $scope.sort_order   = 'DESC'

  current_sort_order = $scope.sort_order

  $scope.sort_by_column = (column) ->
    $scope.sort_order = 'ASC'
    $scope.sort_order = 'DESC' if $scope.sort_column == column && current_sort_order == 'ASC'

    # set after sort order
    current_sort_order = $scope.sort_order
    $scope.sort_column = column

    # call your search method!

directive.js.coffee

.directive 'sortOrderArrows', () ->
  return {
    restrict: 'A'
    scope: {
      sort_column: '=sortOrderArrows'
      sort_order:  '=sortOrder'
      column_name: '@columnName'
    }
    template: "<i class='icon-sort-up'></i><i class='icon-sort-down'></i>"
    link: (scope, element, attrs) ->
      scope.$watch 'sort_column', (sort_column) ->
        element.show()
        unless scope.column_name == sort_column
          element.hide()

      scope.$watch 'sort_order', (sort_order) ->
        if scope.sort_order == 'ASC'
          element.find('.icon-sort-down').hide()
          element.find('.icon-sort-up').show()
        else
          element.find('.icon-sort-down').show()
          element.find('.icon-sort-up').hide()
  }

index.html.haml

%th
  %a(ng-click='sort_by_column("column_attr")')
    Column Name
  %span(sort-order-arrows='sort_column' data-sort-order='sort_order' data-column-name="id")