title: How to place pagination outside angular ui-grid?
body: <p>This is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
  
  app.controller('MainCtrl', [
  '$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
  
    var paginationOptions = {
      pageNumber: 1,
      pageSize: 25,
      sort: null
    };
  
    $scope.gridOptions = {
      paginationPageSizes: [25, 50, 75],
      paginationPageSize: 25,
      useExternalPagination: true,
      useExternalSorting: true,
      columnDefs: [
        { name: 'name' },
        { name: 'gender', enableSorting: false },
        { name: 'company', enableSorting: false }
      ],
      onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
          if (sortColumns.length == 0) {
            paginationOptions.sort = null;
          } else {
            paginationOptions.sort = sortColumns[0].sort.direction;
          }
          getPage();
        });
        gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
          paginationOptions.pageNumber = newPage;
          paginationOptions.pageSize = pageSize;
          getPage();
        });
      }
    };
  
    var getPage = function() {
      var url;
      switch(paginationOptions.sort) {
        case uiGridConstants.ASC:
          url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
          break;
        case uiGridConstants.DESC:
          url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
          break;
        default:
          url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
          break;
      }
  
      $http.get(url)
      .success(function (data) {
        $scope.gridOptions.totalItems = 100;
        var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
        $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
      });
    };
  
    getPage();
  }
  ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="app"&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/csv.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/release/ui-grid.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"&gt;
      &lt;link rel="stylesheet" href="main.css" type="text/css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="MainCtrl"&gt;
    &lt;div ui-grid="gridOptions" ui-grid-pagination class="grid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  In the above code pagination is displayed on ui-grid. but i want to display pagination outside the ui-grid and if data is less than 10 disable pagination.
  This is my plunker <a href="http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview" rel="nofollow">http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview</a></p>