   }
 ]
 
-angular.module("angular-table").directive "atPager", ["attributeExtractor", (attributeExtractor) ->
+angular.module("angular-table").directive "atPagination", ["attributeExtractor", (attributeExtractor) ->
   {
     replace: true
     restrict: "E"
     template: "
       <div class='pagination' style='margin: 0px;'>
         <ul>
-          <li ng-class='{disabled: currentPage <= 0}'>
-            <a href='' ng-click='goToPage(currentPage - 1)'>&laquo;</a>
+          <li ng-class='{disabled: stub.currentPage <= 0}'>
+            <a href='' ng-click='goToPage(stub.currentPage - 1)'>&laquo;</a>
           </li>
-          <li ng-class='{active: currentPage == page}' ng-repeat='page in pages'>
+          <li ng-class='{active: stub.currentPage == page}' ng-repeat='page in pages'>
             <a href='' ng-click='goToPage(page)'>{{page + 1}}</a>
           </li>
-          <li ng-class='{disabled: currentPage >= numberOfPages - 1}'>
-            <a href='' ng-click='goToPage(currentPage + 1); normalize()'>&raquo;</a>
+          <li ng-class='{disabled: stub.currentPage >= stub.numberOfPages - 1}'>
+            <a href='' ng-click='goToPage(stub.currentPage + 1); normalize()'>&raquo;</a>
           </li>
         </ul>
       </div>"

      list: "="
    }
    link: ($scope, $element, $attributes) ->
      $scope.currentPage = 0

      # $scope.itemsPerPage = 7

      $scope.update = () ->
        $scope.numberOfPages = Math.ceil($scope.list.length / $scope.itemsPerPage)
        $scope.pages = for x in [0..($scope.numberOfPages - 1)]
          x

      $scope.fromPage = () ->
        $scope.itemsPerPage * $scope.currentPage - $scope.list.length

      $scope.goToPage = (page) ->
        if page < 0
          page = 0
        else if page > $scope.numberOfPages - 1
          page = $scope.numberOfPages - 1

        $scope.currentPage = page

      $scope.update()

      $scope.instance = $scope

      $scope.$watch "list", () ->
        $scope.update()


  {
    restrict: "AC"
    scope: true
    compile: (element, attributes, transclude) ->


      paginationName = attributes.pagination

      listName = attributes.list || "#{paginationName}.list"

      constructHeader(element)

      tbody = element.find "tbody"
      tr = tbody.find "tr"

      tr.attr("ng-repeat", "item in #{listName} | limitTo:fromPage() | limitTo:toPage() | orderBy:predicate:descending")

      {
        post: ($scope, $element, $attributes) ->

          $scope.getSortIcon = (predicate) ->
            return "icon-minus" if predicate != $scope.predicate
            if $scope.descending then "icon-chevron-down" else "icon-chevron-up"

          $scope.fromPage = () ->
            if $scope[paginationName]
              $scope[paginationName].fromPage()
            else
              $scope.list.length

          $scope.toPage = () ->
            if $scope[paginationName]
              $scope[paginationName].itemsPerPage
            else
              $scope.list.length
      }
