diff --git a/src/ui_components/dumbComponents/pagination/pagination.component.js b/src/ui_components/dumbComponents/pagination/pagination.component.js
index ddb1eb9..0324751 100644
--- a/src/ui_components/dumbComponents/pagination/pagination.component.js
+++ b/src/ui_components/dumbComponents/pagination/pagination.component.js
@@ -45,69 +45,67 @@
   </example>
   **/
 
-  .directive('xosPagination', function(){
-    return {
-      restrict: 'E',
-      scope: {
-        pageSize: '=',
-        totalElements: '=',
-        change: '='
-      },
-      template: `
-        <div class="row" ng-if="vm.pageList.length > 1">
-          <div class="col-xs-12 text-center">
-            <ul class="pagination">
-              <li
-                ng-click="vm.goToPage(vm.currentPage - 1)"
-                ng-class="{disabled: vm.currentPage == 0}">
-                <a href="" aria-label="Previous">
-                    <span aria-hidden="true">&laquo;</span>
-                </a>
-              </li>
-              <li ng-repeat="i in vm.pageList" ng-class="{active: i === vm.currentPage}">
-                <a href="" ng-click="vm.goToPage(i)">{{i + 1}}</a>
-              </li>
-              <li
-                ng-click="vm.goToPage(vm.currentPage + 1)"
-                ng-class="{disabled: vm.currentPage == vm.pages - 1}">
-                <a href="" aria-label="Next">
-                    <span aria-hidden="true">&raquo;</span>
-                </a>
-              </li>
-            </ul>
-          </div>
+  .component('xosPagination', {
+    restrict: 'E',
+    bindings: {
+      pageSize: '=',
+      totalElements: '=',
+      change: '='
+    },
+    template: `
+      <div class="row" ng-if="vm.pageList.length > 1">
+        <div class="col-xs-12 text-center">
+          <ul class="pagination">
+            <li
+              ng-click="vm.goToPage(vm.currentPage - 1)"
+              ng-class="{disabled: vm.currentPage == 0}">
+              <a href="" aria-label="Previous">
+                  <span aria-hidden="true">&laquo;</span>
+              </a>
+            </li>
+            <li ng-repeat="i in vm.pageList" ng-class="{active: i === vm.currentPage}">
+              <a href="" ng-click="vm.goToPage(i)">{{i + 1}}</a>
+            </li>
+            <li
+              ng-click="vm.goToPage(vm.currentPage + 1)"
+              ng-class="{disabled: vm.currentPage == vm.pages - 1}">
+              <a href="" aria-label="Next">
+                  <span aria-hidden="true">&raquo;</span>
+              </a>
+            </li>
+          </ul>
         </div>
-      `,
-      bindToController: true,
-      controllerAs: 'vm',
-      controller: function($scope){
-        
-        this.currentPage = 0;
+      </div>
+    `,
+    bindToController: true,
+    controllerAs: 'vm',
+    controller: function($scope){
 
-        this.goToPage = (n) => {
-          if(n < 0 || n === this.pages){
-            return;
-          }
-          this.currentPage = n;
-          this.change(n);
+      this.currentPage = 0;
+
+      this.goToPage = (n) => {
+        if(n < 0 || n === this.pages){
+          return;
         }
-
-        this.createPages = (pages) => {
-          let arr = [];
-          for(let i = 0; i < pages; i++){
-            arr.push(i);
-          }
-          return arr;
-        }
-
-        // watch for data changes
-        $scope.$watch(() => this.totalElements, () => {
-          if(this.totalElements){
-            this.pages = Math.ceil(this.totalElements / this.pageSize);
-            this.pageList = this.createPages(this.pages);
-          }
-        });
+        this.currentPage = n;
+        this.change(n);
       }
+
+      this.createPages = (pages) => {
+        let arr = [];
+        for(let i = 0; i < pages; i++){
+          arr.push(i);
+        }
+        return arr;
+      }
+
+      // watch for data changes
+      $scope.$watch(() => this.totalElements, () => {
+        if(this.totalElements){
+          this.pages = Math.ceil(this.totalElements / this.pageSize);
+          this.pageList = this.createPages(this.pages);
+        }
+      });
     }
   })
   .filter('pagination', function(){