[SOLVED] Angular Tabs render templates with caching in "ng-include src"

Angular Tabs render templates with caching in "ng-include src"

I have been working in angular MVC application containing multitab views. I have a tabset with some templateURL tabs

What I have done for this is like

$scope.templateUrl = '';
var tabs = $scope.tabs =
[];
var controller = this;

this.selectTab = function(tab)
{
  $templateCache.put(tab, tab.templateUrl);
  angular.forEach(tabs, function(tab)
  {
    tab.selected = false;
  });
  tab.selected = true;
};

this.setTabTemplate = function(tab,templateUrl)
{
  $scope.templateUrl = $templateCache.get(tab);
}

this.addTab = function(tab)
{
  controller.selectTab(tab);
  tabs.push(tab);
};

<ng-include src="templateUrl"></ng-include>

I have to cache the templates for fast retrieval. Using ng-include and template URL (that is coming from Spring Dispatcher Servlet) in it with $templateCache not working for me.

Please suggest how can I achieve the same.

Thanks in advance.

Solution

I have included separate ng-include for each tab and it worked for me.

<tabset> 
        <tab ng-repeat="tab in tabsMenu"  active="tab.active"> 
        <tab-heading> {{tab.title}} 
        <i ng-if =tab.closableTab class="glyphicon glyphicon-remove closeTabIcon" ng-click="removeTab($index)"></i> 
        </tab-heading> 
        <ng-include src="tab.url"></ng-include> 
        </tab>

find this fiddle : https://jsfiddle.net/pawanFiddle/mwqty2sf/5/

Thanks