How to give angular ui-grids with different data inside angular ui-bootstrap tabs?

Question

I have multiple tabs and each is having angular ui-grid inside it. Each grid should display different data. But i'm facing problem like in one tab data is coming in the grid on page load but in another tab ui-grid itself is not loading. Not getting what is the problem. Please help. Below is the sample of the code:

<uib-tabset class="nav">
<uib-tab heading="User">
<div ng-include="'./public/partials/tabs/user.html'">
</div>
</uib-tab>

<uib-tab heading="Notes">       
<div ng-include="'./public/partials/tabs/notifications.html'">
</div>
</uib-tab>

<uib-tab heading="Assets">
<div ng-include="'./public/partials/tabs/assetsList.html'"></div>
</uib-tab>
<uib-tab heading="Audit Logs">
<div ng-include="'./public/partials/tabs/audit.html'" >
</div>
</uib-tab>
</uib-tabset>

Html for tabs:

<div class="container-fluid">
<form name="assetsForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="assetsOptions" data-ui-grid-pagination></div>
</div> 
</form>
</div>

<div class="container-fluid">
<form name="userForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="userOptions" data-ui-grid-pagination></div>
</div> 
</form>
</div>

Controller part:

$scope.data = [
  { name: 'Alex', car: 'Toyota' },
  { name: 'Sam', car: 'Lexus' },
  { name: 'Joe', car: 'Dodge' },
  { name: 'Bob', car: 'Buick' },
  { name: 'Cindy', car: 'Ford' },
   ];

$scope.userOptions = {
  data: 'data',
  paginationPageSizes: [5, 10, 25],
  paginationPageSize: 5,
  columnDefs: [
   {name: 'name'},
   {name: 'car'}
     ]
    };

$scope.assetsData = [
     { table: 'Brian', class: 'Audi' },
     { table: 'Malcom', class: 'Mercedes Benz' },
     { table: 'Dave', class: 'Ford' },
     { table: 'Stacey', class: 'Audi' },
     { table: 'Amy', class: 'Acura' },
     { table: 'Scott', class: 'Toyota' },
     { table: 'Ryan', class: 'BMW' },
   ];

   $scope.assetsOptions = {
     data: 'data',
     paginationPageSizes: [5, 10, 25],
     paginationPageSize: 5,
     columnDefs: [
       {name: 'table'},
       {name: 'class'}
     ]
    };  

Answer 1

If one grid is loading on page load and others are not, it basically means A) other tabs are not initialized on page load B) grid initializing code should be in tab switch instead of page load C) file or data is not available at specified location.

I hope this will help.