angular load ui-bootstrap tabbed content dynamically

Question

I am using angular ui-bootstrap tabs for developing tabs. But how I load tabbed data dynamically after each tab click.

I am able to load the static content. But I want to load data dynamically from ajax. Each tab containing different HTML files.

controller

  $scope.customerInfoTabs = 
           {  
              "General":[  
                 "General",
                 "Employment",
                 "Relationship Status",
              ],
              "Identification":[]                
           }
$scope.customerInfo = $scope.customerInfoTabs['General'];

template

<div class="well">            
            <div class="tabbable">
              <ul class="nav nav-tabs">                               
                <li ng-class="{'active': $index == 0}" ng-repeat="infotabs in customerInfo"><a showtab="" href= data-toggle="tab" ng-click="">{{infotabs}}</a></li>              
              </ul>
              <div class="tab-content">                
                <div class="tab-pane active" id="tab1">
                  <p>I'm in Section 1.</p>
                </div>
                <div class="tab-pane" id="tab2">
                  <p>Howdy, I'm in Section 2.</p>
                </div>
                <div class="tab-pane" id="tab3">
                  <p>Howdy, I'm in Section 3.</p>
                </div>
              </div>
            </div>
        </div>    

Answer 1

If you want to show dynamic content for each tab you will need to use $http service to fetch the html, then bind it using ngBindHtml.

Here is how:

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}"  select="loadData()">
      <div ng-bind-html="tabDynamicContent"></div>
   </tab>
</tabset>

The above example is a simplification where all the tabs will have the same html. Also make sure you include the ngSanitize module.

Here is the plunkr: http://plnkr.co/edit/Yege43KerzfFKE8k5OGc?p=preview

Answer 2

I think this question was answer by this stackoverflow: first link or second link

So you could use a tab set in order to do the work you need.