So I have a problem where I need to show dynamic data on a bunch of different tabs in different tabsets. I have the basic setup here: site layout
<div class="col-sm-3 full-height" id="left-panel">
<div class="top">
<tabset>
<tab heading="Tab1">
<p>Tab1</p>
</tab>
<tab heading="Tab2">
<p>Tab2</p>
</tab>
</tabset>
</div>
<div>
<tabset>
<tab heading="Tab1">
<p>Tab1</p>
</tab>
<tab heading="Tab2">
<p>Tab2</p>
</tab>
</tabset>
</div>
</div>
<div class="col-sm-8" id="content">
<tabset>
<tab heading="Tab1">
<p>Tab1</p>
</tab>
<tab heading="Tab2">
<p>Tab2</p>
</tab>
<tab heading="Tab3">
<p>Tab3</p>
</tab>
<tab heading="Tab4">
<p>Tab4</p>
</tab>
</tabset>
The problem is that I need to resolve $http requests on each tab when it is either clicked or when the page initially loads and I can't figure out how to do it for each tab.
Would it be best to create a ng-app for each tab-set?
<div class="col-sm-3 full-height" id="left-panel">
<div class="top" ng-app="someApp">
<tabset>
<tab heading="Tab1">
<p>Tab1</p>
</tab>
<tab heading="Tab2">
<p>Tab2</p>
</tab>
</tabset>
</div>
<div ng-app="someOtherApp">
<tabset>
<tab heading="Tab1">
<p>Tab1</p>
</tab>
<tab heading="Tab2">
<p>Tab2</p>
</tab>
</tabset>
</div>
</div>
<div class="col-sm-8" id="content" ng-app="someOtherOtherApp">
<tabset>
<tab heading="Tab1">
<p>Tab1</p>
</tab>
<tab heading="Tab2">
<p>Tab2</p>
</tab>
<tab heading="Tab3">
<p>Tab3</p>
</tab>
<tab heading="Tab4">
<p>Tab4</p>
</tab>
</tabset>
</div>
Can I use $stateProvider to accomplish it? If so will it allow multiple states at one time?
The problem is I couldn't find anything else similar to this layout always see one set of tabs not multiple per page.
What would be the best way to resolve the data for each tab?
Any info you can give me will be greatly appreciated