AngularJS ui-grid rendering issues with multiple grids on a page
<p>I have a pages that is currently running 4 grids. The main grid that is loaded with the page is users, and then 3 more grids are loaded in a Modal each in it's own tab. The issue that i have been having is that when i added the 4th, 3rd on in the modal, the other two or the last one will not render. I get the grid outline but no data. This is happening randomly each time i load the modal.</p>

<p>my gridOptions looks like this:</p>

<pre><code>` $scope.gridOptionsAdd = {
    enableColumnResizing: true,
    enableSorting: true,
    data: $scope.newAdd,
    columnDefs: [
      {name: 'Address Type', field: 'addressTypeDescription'},
      {name: 'Data', field: 'addressData'},
      {name: 'Primary', field: 'primaryYn'},
      {name: 'Private', field: 'privateYn'},
      {name: 'Remove', cellTemplate: ' ' +
        '&lt;button type="button" class="usrView btn btn-danger btn-sm" ng-click="grid.appScope.groupRemove(row.entity.id)"&gt;' +
        '&lt;div class="fa fa-trash" data-toggle="tooltip" data-pacement="bottom" title="View User"&gt;&lt;/div&gt;' +
        '&lt;/button&gt;'
      }
    ],
    onRegisterApi: (gridApi) -&gt;
      $scope.gridApiAdd = gridApi
      $interval( () -&gt;
        $scope.gridApi.core.handleWindowResize()
      , 500, 10)
  }`
</code></pre>

<p>Each of the 3 grid are the same code except for the 3rd variable in <code>$interval</code>; they are 10, 18 and 26.
The modal code is this:</p>

<pre><code>` #open edit user modal
  $scope.userEdit = (id) -&gt;
    $scope.userId = id
    $modalInstance = $uibModal.open ({
      animation: $scope.animationsEnabled,
      templateUrl: 'userEditModal.html',
      controller: 'editUserInCtrl',
      keyboard: true,
      size: 'lg',
      scope: $scope,
      resolve: {
        data: () -&gt;
          return  EntryUsr.get({id: id }).$promise
        ,
        address: () -&gt;
          return EntryAdd.query({user_id: id}).$promise
        ,
        addType: () -&gt;
          return EntryAddType.query().$promise
        ,
        usrPosition: () -&gt;
          return EntryPos.query().$promise
      }
    })
    $scope.updateGrpTable()
    $scope.updateRoleTable()
    $scope.updateAddTable()`
</code></pre>

<p>The last 3 calls pull the user's group, security settings and address and write them to the grids; <code>$scope.gridOptionsAdd.data = data</code> .</p>

<p>The grids are defined in the HTML as:</p>

<pre><code> %div.grid#grid3{'ui-grid'=&gt;'gridOptionsRole'}
</code></pre>

<p>Each grid has its's own ID and refers to a different gridOption set</p>

<p>I get nothing in my console except for 3 errors compling that it can read property 'core'</p>

<pre><code>angular.self-a3680ff….js?body=1:13643 TypeError: Cannot read property 'core' of undefined
    at user.self-2a6c9f3….js?body=1:200
    at callback (angular.self-a3680ff….js?body=1:12457)
    at Scope.$eval (angular.self-a3680ff….js?body=1:17379)
    at Scope.$digest (angular.self-a3680ff….js?body=1:17192)
    at Scope.$apply (angular.self-a3680ff….js?body=1:17487)
    at tick (angular.self-a3680ff….js?body=1:12447)
</code></pre>

<p>Many thanks.</p>