AngularJS + jQuery UI Tabs Example

by yannick serra

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="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li>
    </ul>
    <div ng-repeat="tab in tabs" id="{{tab.id}}">
        <p>{{tab.content}}</p>
    </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.tabs = [];
	
	
	$scope.tabs.push({id: 'tab1', title : 'One', content : 'One'});
	$scope.tabs.push({id: 'tab2', title : 'Two', content : 'Two'});
	$scope.tabs.push({id: 'tab3', title : 'Three', content : 'Three'});
	
	$scope.addTab = function()
	{
		tabs.push({id: '4', title : 'Four', content : 'Four'});
		
	};
    
})
.directive('hboTabs',['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            $timeout( function () {
            var jqueryElm = $(elm[0]);
                $(jqueryElm).tabs()},0);
        }
    };
}])