Untitled

<!doctype html>
<html ng-app="mainModule">
<body>
<tab-control id="MainTabControl" class="red">
        <tab name="FirstTab" id="Tab1">
            Tab 1 stuff
        </tab>
        <tab name="SecondTab" id="Tab2" selected>
            Tab 2 stuff
        </tab>
        <tab name="ThirdTab" id="Tab3">
            <strong>Tab 3</strong>
        </tab>
    </tab-control>

    <div ng-controller="DynamicTabController">
        <tab-control>
            <tab ng-repeat="tab in tabs" name="{{tab.name}}" id="{{tab.id}}" selected="{{ $index == 1 }}">
                {{tab.name}}
            </tab>
        </tab-control>
    </div>

    <script type="text/ng-template" id="tabControlTemplate">
        <ul id="{{id}}" class="{{klass}} tab-control">
            <li ng-repeat="tab in tabs" ng-class="{ selected: tab.selected }" class="tab" ng-click="selectTab(tab)">{{tab.name}}</li>
        </ul>

        <section ng-transclude>
        </section>
    </script>

    <script type="text/ng-template" id="tabTemplate">
        <article id="{{id}}" ng-class="{ selected: selected}" class="{{klass}} tab-content">
            <header>
                <h1>{{ name }}</h1>
            </header>
            <section ng-transclude>
            </section>
        </article>
    </script>
    </body>
</html>

var mainModule = angular.module("mainModule", []);

        mainModule.directive('tabControl', function() {
            return {
                restrict: 'E',
                templateUrl: 'tabControlTemplate',
                scope: {
                    id: '@id',
                    klass: '@class',
                },
                transclude: true,
                controller: ['$scope', function($scope) {
                    $scope.tabs = []

                    this.addTab = function(tab){
                        $scope.tabs.push(tab);
                    }

                    $scope.selectTab = function(tab){
                        for(var i=0; i<$scope.tabs.length; i++){
                            if(tab.name != $scope.tabs[i].name){
                                $scope.tabs[i].selected = false;
                            }
                            else {
                                $scope.tabs[i].selected = true;
                            }
                        }
                    }
                }]
            };
        });

        mainModule.directive('tab', function(){
            return {
                restrict: 'E',
                templateUrl: 'tabTemplate',
                transclude: true,
                replace: true,
                scope: {
                    id: '@id',
                    name: '@name',
                },
                require: '^tabControl',
                link: function(scope, element, attrs, ctrl) {
                    scope.selected = attrs.selected == "" || attrs.selected == true
                    ctrl.addTab(scope);
                }
            };
        });

        mainModule.controller("DynamicTabController", ['$scope', function($scope){
            $scope.tabs = [
                { name: 'Tab1', id: 'Tab1'},
                { name: 'Tab2', id: 'Tab2'},
                { name: 'Tab3', id: 'Tab3'},
                { name: 'Tab4', id: 'Tab4'},
                { name: 'Tab5', id: 'Tab5'},
                { name: 'Tab6', id: 'Tab6'},
                { name: 'Tab7', id: 'Tab7'}
            ]
        }]);

.tab-control {
    list-style: none;
    padding: 0;
    margin: 5px;
}

.tab-control li {
    display: inline;
    padding: 5px 20px;
    border: 1px solid grey;
    border-bottom: 0;
    border-radius: 5;
    cursor: pointer;
}

.tab-control li.selected {
    background-color: lightblue;
}

.tab-content header {
    display : none;
}

.tab-content {
    border: 1px solid black;
    width: 100%;
    height: 100%;
    display: none;
}

.tab-content.selected {
    display: block;
}

if (tab.name != $scope.tabs[i].name) {
    $scope.tabs[i].selected = false;
} else {
    $scope.tabs[i].selected = true;
}

$scope.tabs[i].selected = ( tab.name == $scope.tabs[i].name );