Tabs Pane - Dynamic

Add new tabs dynamically and the tabs info in the $scope so easily manipulated

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<br/><br/>
<div ng-cloak ng-app="TabsApp">
<div class="container" ng-controller="TabManagerCtrl">
    <span class="label label-info label-ext" ng-click="tabManager.addTab()" style="cursor:pointer">Add a Tab</span><br/><br/>

    <div>{{tabManager.tabItems}}
        <div tabs>
            <div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{tabInfo.nome}}">   
                <input type="text" ng-model="tabInfo.nome" ng-change="tabManager.getTitle(tabInfo)">
            </div>
        </div>
    </div>

    <br/><br/><br/>

</div><!-- /container -->
</div> <!-- /container -->
</div> <!-- /app -->

JavaScript

/*app.js tabs*/

var angularApp = angular.module('TabsApp', []);
angularApp.controller('TabManagerCtrl', ['$scope', function($scope) {


    $scope.tabManager = {"tabItems": [{"nome":"Tab No: 1","selected":true},{"nome":"Tab No: 2","selected":false}]};


    $scope.tabManager.getTitle = function(tabInfo){
        console.log("[ title ] -> ",tabInfo.title);
        tabInfo.title.substr(0,10);
    };
    
    $scope.tabManager.select = function(i) {
        angular.forEach($scope.tabManager.tabItems, function(tabInfo) {
            tabInfo.selected = false;
        });
        $scope.tabManager.tabItems[i].selected = true;
    }
    
    // init the first active tab
    $scope.tabManager.select(0);

}]);

angularApp.directive('tabs', function() {
        return {
            restrict: 'A',
            transclude: true,
            scope: {},
            controller: function($scope, $element) {
                var panes = $scope.panes = [];

                $scope.select = function(pane) {
                    angular.forEach(panes, function(pane) {
                        pane.selected = false;
                    });
                    pane.selected = true;
                };

                this.addPane = function(pane) {
                    if (panes.length === 0) $scope.select(pane);
                    panes.push(pane);
                };
            },
            template:
                '<div class="tabbable">' +
                    '<ul class="nav nav-tabs">' +
                    '<li ng-repeat="pane in panes" ng-class="{active:pane.$parent.tabInfo.selected}">'+
            '<a href="" ng-click="pane.$parent.tabManager.select($index)">{{pane.title}}</a>' +
                    '</li>' +
                    '</ul>' +
                    '<div class="tab-content" ng-transclude></div>' +
                    '</div>',
            replace: true
        };
    });
angularApp.directive('pane', function() {
        return {
            require: '^tabs',
        ...