Angular UI Bootstrap tabset with ng-repeat

Question

I'm trying to upgrade my version of bootstrap-ui from 0.14.x to the latest 1.3.2 and I'm encountering some issues regarding the uib-tabset / uib-tab directives.

What I'm trying to do is dynamically create tabs using ng-repeat and have the 'active' tab be handled by expressions or properties of my repeat model.

 <uib-tabset type="pills" active="{{activeItem.Id}}"  >
    <uib-tab class="arrow_box"
             ng-repeat="item in myObject.myCollection"
             ng-click="SetActiveItem(item)" id="{{$index}}"
             index="{{item.Id}}">

The index="{{item.Id}}" binding does not work at all. So I can't seem to set my tab indexes via an expression, which wouldn't be a problem if I could get the uib-tabset to use the active property once the ng-repeat was complete.

activeItem is a property on $scope of the enclosing controller.

Adding this binding results in an error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{item.Id}}] starting at [{item.Id}}].

If I omit everything (the index attribute on uib-tab and active attribute on uib-tabset) it doesn't throw any errors but it also doesn't select any tabs by default, meaning I need to click one to activate that tab. Even though the documentation states that the defaults are "defaulting to the first tab".

Any reason ng-repeat no longer works properly with this directive set? I'm probably missing something here but I'm stumped.

Thanks

Edit: Here is a plunkr link showing the issue I'm having. https://plnkr.co/edit/DWOILq?p=preview

Answer 1

After trying out a few more things I realized I made a mistake and did not have to include the brackets for the expression for either binding (active or index).

It just didn't seem like they were being evaluated but they actually are.

Here is the code that should work: activeItemId being a property on the parent controller.

<uib-tabset type="pills" active="activeItemId">
    <uib-tab class="arrow_box"
             ng-repeat="item in myObject.myCollection"
             ng-click="SetActiveItem(item)"
             index="item.Id">
    </uib-tab>
</uib-tabset>

Answer 2

First I tried a lot to fix it but then I decided to search in google. I found this link .

Your problem is a known problem and will not be fixed. "uib-tab won't toggle active class if uib-tab index is set to dynamic key". You have to take some different approach like use of '$index'.