How to hide a tab in Angular Bootstrap UI using ng-show/ng-hide

Question

I am using Angular Bootstrap UI to show a tabset. The script I include is ui-bootstrap-tpls-0.6.0.min.js and some template html files.

here is my markup:

<tabset>
    <tab ng-hide="!hideme">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="hideme">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

here is my controller

function myController($scope) {
    $scope.hideme = true;
});

This code does not work (the 2nd tab does not hide). What is the catch to apply ng attribute to a custom directive?

Answer 1

The tab directive creates a new scope, so need to use $parent to access the model. Try

ng-hide="$parent.hideme"

Answer 2

First Solution: Use both ng-show and ng-hide

<tabset>
<tab ng-show="hideme">
    <tab-heading>
        tab1
    </tab-heading>
    <div>
        tab content 1
    </div>
</tab>
<tab ng-hide="hideme">
    <tab-heading>
        tab2
    </tab-heading>
    <div>
        tab content 2
    </div>
</tab>

Second Solution: Write a directive

.directive("hideTab", function() {
    return function(scope, elm, attrs) {
        scope.$watch(function() {
            $(elm).css("display", "none");
        });
    };
});