Multiple Grids using ngIf and ngRepeat will not update footer from server side paging.

Hello,

We have an issue we are facing where we have tabs of grids and different gridOptions per grid. When tabbing from grid to grid, the data updates correctly, but the footer does not update the total items properly. We have the ui-grid directive wrapped in our own custom directive so that we can pass different options to each of the tabs, although I've removed some of that code for the purpose of reporting here.

The first tab always works just fine with everything. But none of the other tabs do. Once going to the tab, clicking on a different tab, and back again, the footer seems to update just fine on the second time around... I thought it might have something to do with onRegisterApi not being set correctly on the 2 - x tabs because I did notice some weirdness there and that's why even after my extend of the default options, I have the line scope.gridOptions.onRegisterApi = setGridApi; just to make sure that gets run. If I don't add this line, then the other tabs do not call this method.

I've even tried not using ngIf and ngRepeat and just using a watch on the gridOptions to update a single grid with different data, but still had the same issue. ngShow works great, except that it loads all of the grids all at once on first page load and I can't have that.

Am I doing something wrong or is this an issue I've found? (I know pagination is still in "Alpha")

I'm using Angular 1.4.4 and angular-ui-grid 3.0.4 (tried 3.0.6 as well, but same issue)

Here's a plnkr: http://plnkr.co/edit/4XWarYb9xlDnadpTC0kG?p=preview

subTab.html:

<div class="panel panel-default padding-xlg">
  <ul id="subtabs" class="list nav-detail nav-detail-tabs">
    <li data-ng-repeat="tab in tabs" data-ng-class="getTabClasses(tab)">
      <a href="" data-ng-click="select(tab)">{{tab.heading}}</a>
    </li>
  </ul>
  <div data-cs-grid data-ng-repeat="tab in tabs" data-grid-options="tab.gridOptions" data-ng-if="isActiveTab(tab)"></div>
</div>

subTab Directive (slightly edited for privacy):

...
function csSubTab($resource, $stateParams, $state) {
    var directive = {
      restrict: 'A',
      scope: {},
      templateUrl: 'subTab.html',
      link: link
    };

    function link(scope) {
      scope.activeTab;

      scope.tabs = getModuleSubTabs($stateParams.module);

      select(scope.tabs[0]);

      scope.select = select;
      scope.isActiveTab = isActiveTab;
      scope.getTabClasses = getTabClasses;

      function select(tab) {
        scope.activeTab = tab.heading;
      }

      function isActiveTab(tab) {
        return tab.heading === scope.activeTab;
      }

      function getTabClasses(tab) {
        var classes = '';
        if (isActiveTab(tab)) {
          classes += 'active';
        }
        return classes;
      }

      function getModuleSubTabs(moduleName) {
        var tabs = [];
        var tabList = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
        for (var i = 0, len = tabList.length; i < len; i++) {
          tabs.push({
            heading: tabList[i],
            gridOptions: getSubTabGridOptions(tabList[i].toLowerCase().replace(/ /g, ''))
          });
        }
        return tabs;
      }

      function getSubTabGridOptions(subTabName) {
        return {
          useExternalPagination: true,
          paginationPageSizes: [10],
          paginationPageSize: 10,
          enableFiltering: false,
          enableGridMenu: true,
          exporterMenuPdf: false,
          enableRowSelection: true,
          selectWithCheckboxOnly: true,
          showSelectionCheckbox: true,
          rowHeight: 22,
          columnsResource: $resource('app/modules/data/subTabs/' + subTabName + 'Columns.json'),
          dataResource: $resource('api/3/' + subTabName)
        };
      }
    }

    return directive;
  }

grid.html:

<div data-ui-grid="gridOptions" class="grid" data-ui-grid-edit data-ui-grid-cellnav data-ui-grid-pagination ui-grid-resize-columns ui-grid-auto-resize ui-grid-selection ui-grid-exporter ui-grid-grouping></div>

grid Directive (slightly edited for privacy):

...
function csGrid($resource) {
    var directive = {
      restrict: 'A',
      scope: {
        gridOptions: '='
      },
      templateUrl: 'grid.html',
      link: link
    };

    function link(scope) {
      var defaultGridOptions = {
        useExternalPagination: true,
        paginationPageSizes: [10],
        paginationPageSize: 10,
        onRegisterApi: setGridApi,
        enableFiltering: false,
        enableGridMenu: true,
        exporterMenuPdf: false,
        enableRowSelection: true,
        selectWithCheckboxOnly: true,
        showSelectionCheckbox: true,
        rowHeight: 22
      };

      scope.gridOptions = angular.extend({}, defaultGridOptions, scope.gridOptions);
      scope.gridOptions.onRegisterApi = setGridApi;

      scope.gridOptions.columnsResource.get({}, setColumns);
      getPage(1);

      function setColumns(data) {
        scope.gridOptions.columnDefs = data.columns;
      }

      function setData(data) {
        if (data['@type'] && data['@type'] !== 'Error') {
          scope.gridOptions.totalItems = data['hydra:totalItems'];
          scope.gridOptions.data = data['hydra:member'];
          if (data['hydra:member'].length === 0) {
            alert('No Results');
          }
        } else {
          alert(data['hydra:title'] + ':\n\t' + data['hydra:description']);
        }
      }

      function dataError(e) {
        alert('error retrieving data:\n\t' + e);
      }

      function setGridApi(gridApi) {
        scope.gridApi = gridApi;
        scope.gridApi.pagination.on.paginationChanged(scope, getPage);
      }

      function getPage(pageNum){
        scope.gridOptions.dataResource.get({page: pageNum}, setData, dataError);
      }
    }

    return directive;
  }