title: Angular Ui-Grid Columns not showing
body: <p>The following webpage is a container with three different tabs: Uploaded Datasets, Bought Datasets and Integrated Datasets:</p>
  
  <p><a href="https://i.stack.imgur.com/txKzY.png" rel="nofollow noreferrer">1st Tab</a> </p>
  
  <p>each tab content is a UI-Grid that I call through an angular directive as follows:</p>
  
  <pre><code>&lt;div class="form-top"&gt;
      &lt;nav&gt;
          &lt;div class="nav nav-tabs" id="nav-tab" role="tablist"&gt;
              &lt;a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-uploaded" role="tab" aria-controls="nav-uploaded" aria-selected="true"&gt;
                  Uploaded Datasets
              &lt;/a&gt; 
              &lt;a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-bought" role="tab" aria-controls="nav-bought" aria-selected="false" &gt;
                  Bought Datasets
              &lt;/a&gt;
              &lt;a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-integrated" role="tab" aria-controls="nav-integrated" aria-selected="false"&gt;
                  Integrated Datasets
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="tab-content" id="nav-tabContent"&gt;
          &lt;div class="tab-pane fade show active" id="nav-uploaded" role="tabpanel"&gt;
              &lt;uploaded-grid&gt;&lt;/uploaded-grid&gt;
              &lt;!-- &lt;div id="grid1" ui-grid="uploadedGridOptions" ui-grid-selection ui-grid-exporter class="grid"&gt;&lt;/div&gt; --&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane fade" id="nav-bought" role="tabpanel"&gt;
              &lt;bought-grid&gt;&lt;/bought-grid&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane fade" id="nav-integrated" role="tabpanel"&gt;
              &lt;integrated-grid&gt;&lt;/integrated-grid&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and each directive contains the following Html code:</p>
  
  <pre><code>&lt;div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-exporter class="grid"&gt;&lt;/div&gt;  
  </code></pre>
  
  <p>and linked with a specific controller: </p>
  
  <pre><code>var app = angular.module("integratedGridCtrl",[]);
  
  app.controller('integratedGridCtrl', ['$http','$scope','$uibModal', function($http, $scope,$uibModal){
      var data = [
          {
              id: "Cox",
              title: "Carney",
              creationDate: "22/22/2019",
              description: "description"
          },
          {
              id: "Lorraine",
              title: "Wise",
              creationDate: "22/22/2019",
              description: "description"
          },
          {
              id: "Nancy",
              title: "Waters",
              creationDate: "22/22/2019",
              description: "description"
          }
      ];
  
      $scope.integratedGridOptions = {
          showGridFooter: true,
          showColumnFooter: true,
          enableFiltering: true,
          columnDefs: [
              { field: 'id', width: '*',  minWidth: 60},
              { name:  'title', field: 'title', width: '*',  minWidth: 60, displayName: 'title' },
              { field: 'creationDate', width: '*',displayName: 'creation Date',  minWidth: 60, cellFilter: 'date' },
              { field: 'description', width: '*', minWidth: 60 },             
          ],
          onRegisterApi: function(gridApi) {
              $scope.gridApi = gridApi;
          },
          rowTemplate: '&lt;div ng-click=\"grid.appScope.detailPopup(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ui-grid-cell style="cursor: pointer"&gt;&lt;/div&gt;',
          enableGridMenu: true,
          enableSelectAll: true,
          exporterCsvFilename: 'myFile.csv',
          exporterPdfDefaultStyle: {fontSize: 9},
          exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
          exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
          exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
          exporterPdfFooter: function ( currentPage, pageCount ) {
              return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
          },
          exporterPdfCustomFormatter: function ( docDefinition ) {
              docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
              docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
                  return docDefinition;
              },
          exporterPdfOrientation: 'portrait',
          exporterPdfPageSize: 'LETTER',
          exporterPdfMaxGridWidth: 500,
          exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
          exporterExcelFilename: 'myFile.xlsx',
          exporterExcelSheetName: 'Sheet1'
      }   
      $scope.integratedGridOptions.data = data;
   }]);
  </code></pre>
  
  <p>The first two tabs are well displayed, but the 3rd tab doesn't show the columns from the first click until I refresh again. </p>
  
  <p><a href="https://i.stack.imgur.com/mGSVh.png" rel="nofollow noreferrer">3rd Tab</a> </p>