bootstrap tabs does not work with angular ui router

问题

Thats the plunker as repro: http://plnkr.co/edit/aAsEiedQSrmIhL6KtGVL?p=preview

The projects tab content is initially not visible. Only when I explicitly click on the projects tab its content gets visible.

With the ui-sref="{{t.route}}" the edit/create state activation/rendering works.

Using the original select="go(t.route)" the initial selection of the project tab works but the activation of the edit/create state fails. Weird things happen when you debug the code.

How can I fix that buggy behavior?

The import code is this:

<div>
    <tabset class="tabs-left">
        <tab 
            ng-repeat="t in tabs" 
            heading="{{t.heading}}"
            ui-sref="{{t.route}}"
           /* select="go(t.route)" */

            active="t.active">
        </tab>
    </tabset>
    <div ui-view="planner"></div>
</div>

来源：https://stackoverflow.com/questions/28387547/bootstrap-tabs-does-not-work-with-angular-ui-router