Untitled

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
  </head>   
  <body ng-app="myApp">
    <div ng-controller="mainController">
      <h1>{{title}}</h1>
        <grid current-page="3" total-pages= "30" total-count="10", per-page="2"></grid>
    </div>        
    <script src="app.js"></script>
    <script src="mainController.js"></script>
    <script src="gridDirective.js"></script>
  </body>    
</html>

app.directive('grid', gridPagination);

function gridPagination() {
  return {
    restrict: 'E',
    scope: {
      currentPage: '=',
      totalPages: '=',
      totalCount: '=',
      perPage: '='
    },
    templateUrl: 'gridPagination.html',
    link: function(scope, element, attrs) {
      console.log(scope.currentPage);
      console.log(scope.totalPages);
      console.log(scope.totalCount);
      console.log(scope.perPage);
    }
  };
}

var app = angular.module("myApp", []);

<label>current Page:</label><span>{{ currentPage }}</span>
<br>
<label>Total Pages:</label> {{ totalPages }}

app.controller('mainController', ['$scope', function($scope) {
  $scope.title = 'My Grid';
}]);