AngularJS and JQuery UI Tabs

I've seen some samples of tabs with AngularJS, and very few about JQueryUI tabs with AngularJS, so I tried to create two directives to create the tabs container, and the tab items.

Here is the sample code I've created: http://jsfiddle.net/davidzapata/tvq6w1g9/2/

HTML

<div ng-app="biApp">
    <div ng-controller="MyCtrl">
        <h1>{{greeting}}</h1>
        <jqueryuitabs>
            <jqueryuitab id="tab1" title="Tab 1">Tab 1 content</jqueryuitab>
            <jqueryuitab id="tab2" title="Tab 2">Tab 2 content</jqueryuitab>
            <jqueryuitab id="tab3" title="Tab 3">Tab 3 content</jqueryuitab>
        </jqueryuitabs>
    </div>
</div>

JS

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

appModule.controller('MyCtrl', function($scope){
    $scope.greeting = 'Hi!';
});

appModule.directive('jqueryuitabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li></ul><ng-transclude></ng-transclude></div>',
        controller: function($scope) {
            console.log('jqueryuitabs Controller');
            $scope.tabs = [];

            this.addTab = function(tab){
                console.log('Add Tab', tab);
                $scope.tabs.push(tab);
            }
        },
        link: function(scope, elm, attrs) {
            console.log('jqueryuitabs link');
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs();
        }
    };
});

appModule.directive('jqueryuitab', function () {
    return {
        restrict: 'E',
        require: '^jqueryuitabs',
        transclude: true,
        scope: {
            id: "@",
            title: "@"
        },
        template: '<div id="{{id}}" ng-transclude></div>',
        link: function (scope, element, attrs, tabsCtrl) {
            console.log('Tab link');

            tabsCtrl.addTab(scope);
        }
    };
});

I've never created code before in jsfiddle.net, but that code seems to load the required libraries. Even so, the controller works, the "greeting" model is rendered, but the tabs are not working, and they are not even transcluding the content into the respective elements.

Of course, I'm an new using AngularJS, but I haven't figured out how to solve this problem.

Thanks you!