title: Uib-tab containing UI-GRID
body: <p>I have a <code>uib-tabset</code> with four tabs:</p>
  
  <pre><code>&lt;uib-tabset active="activeForm"&gt;
      &lt;uib-tab index="0" heading="One"&gt;&lt;ng-include src="'one.html'"&gt;&lt;/ng-include&gt;&lt;/uib-tab&gt;
      &lt;uib-tab index="1" heading="Two"&gt;&lt;ng-include src="'two.html'"&gt;&lt;/ng-include&gt;&lt;/uib-tab&gt;
      &lt;uib-tab index="2" heading="Three"&gt;&lt;ng-include src="'three.html'"&gt;&lt;/ng-include&gt;&lt;/uib-tab&gt;
      &lt;uib-tab index="3" heading="Four"&gt;&lt;ng-include src="'four.html'"&gt;&lt;/ng-include&gt;&lt;/uib-tab&gt;
  &lt;/uib-tabset&gt;
  </code></pre>
  
  <p>it has this controller:</p>
  
  <pre><code>$scope.tabs = [
    { title: 'One', route: 'one' },
    { title: 'Two', route: 'two' },
    { title: 'Three', route: 'three' },
    { title: 'Four', route: 'four' }
  ];
  
  $scope.go = function(route) {
    $state.go(route);
  };
  </code></pre>
  
  <p>Each tab has the same structure. They all contain a UI-GRID, and differ only in the data they contain:</p>
  
  <pre><code>$scope.dataList = [];
  $scope.selectedFile = null;
  
  $scope.gridOpts = {
  enableFiltering: true,
  enableRowSelection: true,
  enableRowHeaderSelection: false,
  multiSelect: false,
  modifierKeysToMultiSelect: false,
  noUnselect: false,
  columnDefs: [..my fields..],
  onRegisterApi: function(gridApi) {
    //set gridApi on scope
    $scope.gridApi = gridApi;
    gridApi.selection.on.rowSelectionChanged($scope,function(row){
      $scope.selectedFile = row.entity;
      // Switcher selezione/deselezione
      if ($scope.atLeastOneIsSelected === false){
        $scope.atLeastOneIsSelected = true;
      } else {
        $scope.atLeastOneIsSelected = false;
      }
    });
  
    gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
      $scope.atLeastOneIsSelected = false;
    });
  
    $scope.getFirstData();
    }
  };
  
  $scope.addGridData = function(datalist) {
    $scope.dataList = $scope.dataList.concat(datalist);
    $scope.gridOpts.data = $scope.dataList;
  };
  
  $scope.getMoreDataAsync = function(firstData) {
    if ($scope.cancelPromise) {
      $scope.cancelPromise.resolve();
    }
    $scope.cancelPromise = $q.defer();
    TypeOneFileSrv.fileList.get(
      {
        userId: $scope.$stateParams.userId
      }, function(data) {
        if (data) {
          $scope.addGridData(data);
          blockUI.stop();
        }
      }, function(error) {
        if (error) {
          toaster.pop('error', 'Error', error);
        }
      }
    );
  };
  
  $scope.getFirstData = function() {
    blockUI.start('Loading 'ONE' tab...');
    $scope.selectedFile = null;
    $scope.dataList.length = 0;
    $scope.getMoreDataAsync(true);
  };
  </code></pre>
  
  <p>At least, here is the Service which calls the server. As for the Controller, even the Services of the four tab are the same and differ only in the url:</p>
  
  <pre><code>angular.module('app').factory('TypeOneFileSrv', ['$resource', function($resource) {
  var typeOne = {
    fileList: $resource('url_for_the_first_tab/:userId/?', {
      userId: '@userId'
    }, {
      get: {
        method: 'GET',
        isArray: true
      }
    })
  };
  return typeOne;
  }]);
  </code></pre>
  
  <p>My <strong>problem</strong> is that, even if I added the <code>blockUI</code> in each tab, when I open the page containing the <code>uib-tabset</code> it seems sometimes it does not load all the data. Because for example I see the first two tabs that have the table populated, but the other two are not populated. Or the first two and the last, and so on.</p>