AngularJS + jQuery UI Tabs Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://code.angularjs.org/1.0.3/angular.min.js"></script>
<div ng-controller="myCtrl">

<div data-hbo-tabs id="tabs">
    <ul>
        <li><a href="#tabs-1" ng-click="tab1()">Tab 1</a></li>
        <li><a href="#tabs-2" ng-click="tab2()">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>
    
    </div>

CSS

body {
   background-color: #eef;     
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

JavaScript

var app=angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
    $scope.tab1=function(){
        alert("tab1 service call goes here");
        alert(this.text);
    }
     $scope.tab2=function(){
        alert("tab2 service call goes here");
    }
})
.directive('hboTabs', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs()
        }
    };
})