angularjs - Load Angular Template when tab is active -

i'm new angular, learning specifics. i'm building data dashboard , linking own rest interface. app incredibly slow.

basically have few different "views" load tab-content.

i'm using angular routes map view templates content of each tab when it's clicked. i've tried different other structures - controllers & directives, think routes efficient.

the content of each tab grabbing bunch of data , populating table under each tab. i.e. each table has different data needs accessed when tab active/ clicked.

i'm concerned in current set up, data (for every table) being called when initial page loaded slowing down initial app load significantly. right in thinking this?

how can optimise current set load view/data it's needed?

index.php

<div ng-app="myapp" class="row-fluid">    // lods controller isn't being used    <div class="right-container" ng-controller="maincontroller">       // loads clickable tabs       <ul class="nav nav-tabs nav-justified">           <li class="active"><a data-toggle="tab" href="#inventory" >inventory</a></li>            <li><a data-toggle="tab" href="#orders" >orders</a></li>            <li><a data-toggle="tab" href="#products" >products</a></li>        </ul>        // loads tab content & ng-view angular routes        <div class="tab-content">            <div ng-view></div>        </div>    </div> </div> 

my app.js file:

var app = angular.module("myapp", ['ngroute']);  app.config(function ($routeprovider) {    $routeprovider      .when('/', {        controller: 'maincontroller',        templateurl: 'js/views/inventory.php'      })     .when('/inventory', {        templateurl: 'js/views/inventory.php'      })      .when('/orders', {        templateurl: 'js/views/orders.php'      })      .when('/products', {        templateurl: 'js/views/products.php'      })      .otherwise({        redirectto: '/'      });  }); 

a sample of 1 of views - data loaded boostrap table here directly - each view has different data coming separate api, think in current set (as going painfully slow) data coming down in each of views when main page loaded.

js/views/inventory.php

<div id="inventory" class="tab-pane active">     <table class="col-xs-12 text-center" id="inventorytable" data-url="http://myrestapi.com/api/v1/inventory">         <thead>             <tr>                 <th data-field ="name">name</th>                 <th data-field="modifiedtime">last modified</th>                 <th data-field="stockcount">current stock</th>                 <th data-field="cost">cost price</th>                 <th data-field="price">price</th>             </tr>         </thead>         <tbody>         </tbody>     </table> </div> 

if use different routes, don't think of tabs toggle content... think of tab html nav tabs require no javascript

so don't need data-toggle them.

what need way set active class based on route.

for few of them use ng-class , set active appropriate path $location.path()