Dynamically adding umb-tab-view in a custom section

Questions
1

I have created a simple angular resource and controller for a custom backend section. It works great with a static number of hardcoded tabs.

However, I would to add tabs on the fly if possible. Something like this:

<form ng-controller="myController" ng-show="loaded">

<umb-panel>
    <umb-header tabs="tabs"><!-- This works as expected. The tab headers get populated. -->
        <div class="umb-headline-editor-wrapper span12 ng-scope">
            <h1 class="ng-binding">Page {{id}}</h1>
        </div>
    </umb-header>

    <umb-tab-view>            
        <umb-tab id="tab{{$index+1}}" ng-repeat="tab in tabs"><!-- This does not work. -->
            <div class="umb-pane">
                <div>
                    This is tab content for tab {{tab.id}}<br />                        
                </div>
            </div>
        </umb-tab>           
    </umb-tab-view>
</umb-panel>
The dom appears to be updated correctly, but the tab content is hidden.

Any suggestions will be highly appreciated.

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/70861-dynamically-adding-umb-tab-view-in-a-custom-section