Dynamic tabs in Angular-UI fails?

Question

Created this simple test-case which shows the error occuring:

HTML

<tabset ng-repeat="tab in tabs">
    <tab heading="{{tab.title}}">
        <i ng-class="name_to_class[tab.title]"></i>{{tab.title}}
    </tab>
    <tab active="tab.active" disabled="tab.disabled">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="c in tab.content">{{ c }}</li>
        </ul>
    </tab>
</tabset>

JavaScript

var TabsDemoCtrl = function ($scope) {
  $scope.name_to_class = {'Dynamic Title 1': 'pull-right', // icons in real-code
                          'Dynamic Title 2': 'pull-right'};
  $scope.tabs = [
    { title:'Dynamic Title 1', content:['foo', 'bar'] },
    { title:'Dynamic Title 2', content:['can', 'haz'] }
  ];
};

plnkr

Answer 1

You are not suppose to place ng-repeat on tabset ( docs )

place ng-repeat on tab

plnkr

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled"  ng-class="name_to_class[tab.title]">
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="c in tab.content">{{ c }}</li>
    </ul>
  </tab>
</tabset>

Answer 2

Try this. You need to repeat the tab not the tabset right?

        <tabset >
            <tab ng-repeat ="tab in tabs" heading='{{tab.title}}'> 
                <ul class = "list-group" >
                  <li class = "list-group-item" ng-repeat='c in tab.content'> {{c}}
                </ul>
            </tab>
        </tabset>