jQuery Layout Plugin + AngularJS Tabs

I use jQuery layout plugin. Inside a pane I use tabs created by angularjs (code below). When I close the layout pane (south pane in the jsfiddle) and open it again, the tabs don't work anymore. Resizing doesn't cause this problem.

directive('tabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function ($scope, $element) {
            var tabpanes = $scope.tabpanes = [];

            $scope.select = function (tabpane) {
                angular.forEach(tabpanes, function (tabpane) {
                    tabpane.selected = false;
                });
                tabpane.selected = true;
            }

    this.addTabPane = function (tabpane) {
                if (tabpanes.length == 0) $scope.select(tabpane);
                tabpanes.push(tabpane);
            }
  },
        template:
        '<div class="tabbable">' +
        '<ul class="nav nav-tabs">' +
        '<li ng-repeat="tabpane in tabpanes" ng-class="{active:tabpane.selected}">' +
        '<a href="" ng-click="select(tabpane)">{{tabpane.title}}</a>' +
        '</li>' +
        '</ul>' +
        '<div class="tab-content" ng-transclude></div>' +
        '</div>',
        replace: true
    };
}).
directive('tabpane', function () {
    return {
        require: '^tabs',
        restrict: 'E',
        transclude: true,
        scope: { title: '@' },
        link: function (scope, element, attrs, tabsCtrl) {
            tabsCtrl.addTabPane(scope);
        },
        template:
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
        replace: true
    };
})

jsfiddle: http://jsfiddle.net/jfn5z/84/

Why not you use angular-ui-bootstrap or angular-strap

Or please make jsfiddle or pluncker .