AngularJSのタブ構造にngShowまたはngHideエフェクトを作成できませんか？

Question

以下の例では、Aタブが選択されている場合はAディレクティブを表示し、Bを選択した場合はBを表示します。私はng-show、ng-hideを試みましたが、結果は得られませんでした。誰もこれで私を助けることができますか？

ありがとうございます。

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>