如何激活angularjs bootstrap javascript中的当前选项卡

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">选项卡1</a></li>
  <li><a data-toggle="tab" href="#tab2">选项卡2</a></li>
  <li><a data-toggle="tab" href="#tab3">选项卡3</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <h3>选项卡1内容</h3>
    <p>这是选项卡1的内容。</p>
  </div>
  <div id="tab2" class="tab-pane fade">
    <h3>选项卡2内容</h3>
    <p>这是选项卡2的内容。</p>
  </div>
  <div id="tab3" class="tab-pane fade">
    <h3>选项卡3内容</h3>
    <p>这是选项卡3的内容。</p>
  </div>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.activeTab = 'tab1'; // 设置默认激活的选项卡ID

  $scope.activateTab = function(tabId) {
    $scope.activeTab = tabId;
  };
});

<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="nav nav-tabs">
    <li ng-class="{ 'active': activeTab === 'tab1' }"><a ng-click="activateTab('tab1')" href="#tab1">选项卡1</a></li>
    <li ng-class="{ 'active': activeTab === 'tab2' }"><a ng-click="activateTab('tab2')" href="#tab2">选项卡2</a></li>
    <li ng-class="{ 'active': activeTab === 'tab3' }"><a ng-click="activateTab('tab3')" href="#tab3">选项卡3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane fade" ng-class="{ 'in active': activeTab === 'tab1' }">
      <h3>选项卡1内容</h3>
      <p>这是选项卡1的内容。</p>
    </div>
    <div id="tab2" class="tab-pane fade" ng-class="{ 'in active': activeTab === 'tab2' }">
      <h3>选项卡2内容</h3>
      <p>这是选项卡2的内容。</p>
    </div>
    <div id="tab3" class="tab-pane fade" ng-class="{ 'in active': activeTab === 'tab3' }">
      <h3>选项卡3内容</h3>
      <p>这是选项卡3的内容。</p>
    </div>
  </div>
</div>