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 ng-repeat="hod in hods">
        <a href="#a{{hod.staff_id}}">{{hod.longname}}</a></li>
      </ul>
    <div ng-repeat="hodnm in hods" id="a{{hodnm.staff_id}}">
        <p>{{hodnm.username}}</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.hods =
    [
        { leader_id: 1000321, staff_id: 1000321, longname: "Ooi Kok Hong", username: "ANDREW", team_role: "HOD", importance: "1", active:true  },
        { leader_id: 1000321, staff_id: 1000322, longname: "See Chin Joo", username: "CJSEE", team_role: "HOD", importance: "1", active:false }
    ];
})
.directive('hboTabs', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            $timeout(function () {
              var jqueryElm = $(elm[0]);
            $(elm).tabs();
            });
        }
    };
})