Angularjs: Load tabs based on active tabs but prevent rendering on visited tabs

Question

I have a page having about 8 tabs and each tab has lot of html controllers(data bindings).so data rendering becomes slow.
So i used ng-if condition based on active tab which is found using ng-click on tab. The active tab is made visisble using css class. So after using ng-if condition default tab gets loaded fast and on subsequent click on tab each tab gets loaded.But if i again click on the tab which was loaded previously then it again reloaded due to ng-if condition. If i dont use ng-if condition based on active tabs then intial load of page is very slow but navigating between tabs will be faster due to entire tabs loaded at begining.But this method is not efficient as page load is slow at begining. So i want to load tabs based on active tabs as shown below.But i dont want to reload or render the tab again for the tabs which are loaded once. So how it can be done?

<div class="claimant-data-nav " ng-controller="MyController">
    <ul class="nav nav-tabs ">
        <li ng-repeat="tabname in Mylist | unique:'TabName'" ng-class="{'active':tabname.TabName == 'Tab1'}">
            <a data-target="#tab-{{tabname.TabName}}" data-toggle="tab" ng-click="activetab(tabname.TabName)">{{tabname.TabName}}</a>
        </li>
    </ul>
    <div class="tab-content">
       <a data-toggle="tab" class="mobile-tabs" data-target="#tab-{{tabname1.TabName}}" href="javascript:void(0)" ng-repeat="tabname1 in Mylist | unique:'TabName'">{{tabname1.TabName}}</a>
       <div id="tab-{{tabname2.TabName}}" ng-class="{'tab-pane fade active in':tabname2.TabName == 'Tab1','tab-pane fade':tabname2.TabName != 'Tab1'}" ng-repeat="tabname2 in Mylist | unique:'TabName'">
            <div ng-if="activetab == tabname2.TabName">
            <!-- data binding logic here.It has lot of angularjs databindings.-->
            </div>
        </div>
    </div>
</div>      

Answer 1

Are you loading all the data from Ajax call or there are static templates that are being loaded. In either case, you need to maintain another scope map, which retains the state of tabs already loaded/clicked. Update your ng-if condition to execute a function which returns true or false. That function can first check for active tab and then check if it was loaded initially.

If the tab data was already loaded then its just a show/hide game, else show with Bindings and controller functions.