iEat2/web/js/templates/paginatedTable.html

<!-- foodList -->
<div>
  <table class="table table-striped table-hover table-responsive">
    <tr>
      <th class="col-md-1" data-ng-if="$ctrl.onSelect"> </th>
      <th data-ng-repeat="col in $ctrl.structure" class="col-md-{{::(col.size || 3)}}">
        <span data-ng-hide="col.onHeaderClick">{{::col.name}}</span>
        <button data-ng-show="col.onHeaderClick" data-ng-click="col.onHeaderClick()">
          {{::col.name}}
        </button>
      </th>
    </tr>
    <tr data-ng-repeat="item in $ctrl.tableData | limitTo : pageSize : pageSize*(pageOffset-1)">
      <td data-ng-repeat="col in $ctrl.structure">
        <span data-ng-hide="col.onClick">{{ ::(item[col.col]? item[col.col]:col.defaultValue) }}</span>
        <button data-ng-show="col.onClick" data-ng-click="col.onClick(item)">
          {{ ::(item[col.col]? item[col.col]:col.defaultValue) }}
        </button>
      </td>
    </tr>
  </table>
  <div class="form-group col-xs-5">
    <ul class="pagination-sm"
        style="margin: 0;"
        data-uib-pagination=""
        data-boundary-links="true"
        data-force-ellipses="true"
        data-total-items="$ctrl.tableData.length"
        data-ng-model="pageOffset"
        data-items-per-page="pageSize"></ul>
  </div>
  <div class="form-group form-group-sm col-xs-2 pull-right">
    <select class="form-control input-sm" data-ng-model="pageSize">
      <option>10</option>
      <option>20</option>
      <option>30</option>
      <option>40</option>
    </select>
  </div>
</div>