angularJS

angularJS

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<div ng-app="myApp">    
<div id="tabs" ng-controller="pageCtrl" ng-tabs>
        <ul>
            <li ng-repeat="page in pages">
                <a class="pageName" href="#{{page.id}}">{{page.name}}</a>
            </li>
        </ul>
        <div id="{{page.id}}" ng-repeat="page in pages">
            <p>{{page.id}}</p>
        </div>
    </div>
</div>

CSS

.ui-tabs .ui-tabs-nav li { top: 0; }
.ui-tabs .ui-tabs-nav li:hover { background: #fff; border: solid 2px #000; border-bottom: 0 none;}
.ui-tabs .ui-tabs-nav li a { height: 25px; width: 100px; padding: 8px; white-space: normal; line-height: 15px;}
.ui-tabs .ui-tabs-nav li div { height: 26px; padding: 8px; white-space: normal; width: 100px; }
.ui-tabs .ui-tabs-nav li div span { cursor: pointer; padding: 8px; }

JavaScript

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

var pageArray = [
    {
    "id": "tab1",
    "name": "tab1"},
{
    "id": "tab2",
    "name": "tab2"},
{
    "id": "tab3",
    "name": "tab3"}
];

function pageCtrl($scope) {
    $scope.pages = pageArray;
}


myApp.directive('ngTabs', function() {
    return function(scope, elm) {
        setTimeout(function() {
            elm.tabs();
        },0);
    };
});