angularjs: directive and service

Angularjs: a compiled directive that use both attributes and scope

HTML

<script src="https://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<div ng-controller="myCtrl">
    <div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
    <div ng-init="popovers = [	
		{	name: 'Popover1',	
            displayName: 'Pop over with two tabs',
			tabs: [
				{	name: 'Tab1',		
                    displayName: 'First tab',
					description: ['First tab description']
				},
				{	name: 'Tab2',		
                    displayName: 'Second tab',
					description: ['Second tab description']
				}
            ]
        }
    ]"/>
    
    <b>Tabs in popover</b>
    
    <div
        class="popover"
        ng-repeat="p in popovers" 
        >
        Popover name: {{p.displayName}}
        <div ng-repeat="t in p.tabs" 
            class="tab"
            ng-class="currentTab==t.name?'selected':''"
            ng-click="$parent.currentTab=t.name"
            >
                {{t.name}}
        </div>
        <div  ng-repeat="t in p.tabs" 
            class="tabContent" 
            ng-class="currentTab==t.name?'selected':''"
            >
            <p>{{t.displayName}}</p>
        </div>
    </div>
</div>

CSS

body {
    font-family:"AvenirNextCondensed-Regular" sans-serif;
}
figure, div {
    padding: 4px;
}
li {
    text-decoration: underline;
    color: blue;
}
.popover {
    border: solid 1px red;
    width:  50%;
    height: 200px;
}    
.popover .tab {
    display: inline-block; 
    border: solid 1px gray;
    border-bottom: none;
    width:auto;
    background-color: gray;
}
.popover .tab.selected {
    background-color: white;
}

.popover .tabContent {
    border-top: dotted 1px gray;
    display: none;
}

.popover .tabContent.selected {
    display: block;
}

JavaScript

var app = angular.module('myApp', ['ngSanitize']);


app.controller('myCtrl', function ($scope, $location, $http) {

});