Unable to create ngShow or ngHide effects on my tab structure of AngularJS?

Question

In below example, I want to show A directive when A tab is selected and show B when B is selected. I tried ng-show, ng-hide but not getting the results. Can anyone help me with this?

Thank you.

HTML:

<ul class="nav nav-tabs">
   <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">
     <a href="{{tab.link}}" ng-click="setSelectedTab(tab)">
      {{tab.label}}    
     </a>
   </li>
</ul>

<A></A>

<B></B>

JS:

app.controller('myCtrl', ['$scope', '$location', '$routeParams', function ($scope, $location, $routeParams) {
    var tabNdx = 0;
    $scope.tabs = [
        {
            id: 'A',
            link: '#/s/A',
            label: 'A'
        },
        {
            id: 'B',
            link: '#/s/B',
            label: 'B'
        }
    ];

    if ($routeParams.subtab) {
        angular.forEach($scope.tabs, function (tab, i) {
            if ($routeParams.subtab === tab.id) {
                tabNdx = i;
            }
        });
    }
    $scope.selectedTab = $scope.tabs[tabNdx];
    $scope.setSelectedTab = function (tab) {
        $scope.selectedTab = tab;
    };
    $scope.tabClass = function (tab) {
        if ($scope.selectedTab === tab) {
            return "active";
        } else {
            return "";
        }
    };
}]);

Answer 1

<A ng-show="selectedTab.label == 'A'"></A>

<B ng-show="selectedTab.label == 'B'"></B>