Angular JS = Tab Pane = Updated : Select tab on new tab and limit

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/>
    
    <a href="" ng-click="tabManager.select(0)">pick me : 1</a> | 
    <a href="" ng-click="tabManager.select(1)">pick me : 2</a>
    <br/><br/>

    <div>
        <div tabs>
            <div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title | limit:15 }}">
                <p>{{ tabInfo.content }}</p>
                <input type="text" ng-model="tabInfo.title" 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 = {};

    $scope.tabManager.tabItems = [];

    $scope.tabManager.checkIfMaxTabs = function(){
        var max = 4;
        var i = $scope.tabManager.tabItems.length;
        if(i > max){
            return true;
        }
        return false;
    };

    $scope.tabManager.getTitle = function(tabInfo){
        console.log("[ title ] -> ",tabInfo.title);
        tabInfo.title.substr(0,10);
    };

    $scope.tabManager.resetSelected = function(){
        angular.forEach($scope.tabManager.tabItems, function(pane) {
            pane.selected = false;
        });
    };

    $scope.tabManager.addTab = function(){
    console.log($scope.tabManager.tabItems);
        if($scope.tabManager.checkIfMaxTabs()){
            alert("[Max Tabs] You have opened max tabs for this page.");
            return;
        }
        $scope.tabManager.resetSelected();
        var i = ($scope.tabManager.tabItems.length +1);
        $scope.tabManager.tabItems.push({
            title: "Tab No: " + i,
            content: "Lores sum ep sum news test [" + i +"]",
            selected: true
        });
    };
    
    //to select the tab
    $scope.tabManager.select = function(i) {
        angular.forEach($scope.tabManager.tabItems, function(tabInfo) {
            tabInfo.selected = false;
        });
        $scope.tabManager.tabItems[i].selected = true;
    }


    //add few tabs
    for(var i = 1; i < 3; i++){
        $scope.tabManager.tabItems.push({
            title: "Tab No: " + i,
            content: "Lores sum ep sum news test [" + i +"]",
            selected: false
        });
    }
    
    // init the first active tab
    $scope.tabManager.select(0);

}]);

angularApp.directive('tabs', function() {
        return {
            restrict: 'A',
            transclude: true,
            scope: {},
            controller:...