如何在使用angularjs选项卡时单击按钮移动到下一个选项卡

谢谢，我通过使用基于"id"的"href"和脚本移动到下一个选项卡来摆脱这个问题。 这是我的 html 文件。

我的 HTML 文件：

<ul class="nav nav-tabs col-xs-offset-2 col-md-offset-2">
    <li class="active"><a href="#info-tab" data-toggle="tab">Information <i class="fa"></i></a></li>
    <li ><a href="#personalinfo-tab" data-toggle="tab">Personal Information <i class="fa"></i></a></li>
    <li><a href="#address-tab" data-toggle="tab">Address <i class="fa"></i></a></li>
</ul>

  <div class="margintop"></div>
<!--  <form class="form-horizontal">-->
        <form id="accountForm" name="userForm" data-ng-submit="adduser()" class="signin form-horizontal col-xs-offset-2 col-md-offset-0" novalidate autocomplete="off">
<div class="tab-content">
        <div class="tab-pane active" id="info-tab">
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="firstName">First Name:</label>
      <div class="col-xs-7">
        <input type="text" required id="firstName" name="firstName" class="form-control" id="firstName"  data-ng-model="credentials.firstName" placeholder="First Name">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="lastName">Last Name:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control" name="lastName" class="form-control" data-ng-model="credentials.lastName" id="lastName" placeholder="Last Name">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="inputEmail">Email:</label>
      <div class="col-xs-7">
        <input type="email" class="form-control"name="email" class="form-control" data-ng-model="credentials.email" id="inputEmail" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="lastName">User Name:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control"  name="username" class="form-control" data-ng-model="credentials.username" id="userName" placeholder="User Name">
      </div>
    </div>
              <div style="margin: 15px">
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-8 ">
               <a style="margin: 15px" href="#personalinfo-tab" class="btn btn-primary nexttab" data-toggle="tab" id="btn-next">Save and Continue</a>
            </div>
        </div>
    </div>
</div>
<div class="tab-pane" id="personalinfo-tab">
             <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="gender">Gender:</label>
      <div class="col-xs-6">
        <input type="radio" ng-model="credentials.gender" value="Male" />Male
            <input type="radio" ng-model="credentials.gender" value="Female" />Female
      </div>
    </div>
             <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="designation">Designation:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control"  name="designation" class="form-control" data-ng-model="credentials.designation" id="designation" placeholder="Enter Designation">
      </div>
    </div>
    <div style="margin: 15px">
     <div class="form-group">
            <div class="col-xs-offset-3 col-xs-8 ">
               <a href="#address-tab" class="btn btn-primary nexttab" id="btn-next" data-toggle="tab">Save and Continue</a>
            </div>
        </div>
        </div>
</div>
    <div class="tab-pane" id="address-tab">
        <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="mobile">Mobile No:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control" name="mobile" class="form-control" data-ng-model="credentials.mobile" id="mobile" placeholder="Enter Mobile No">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="address">Address:</label>
      <div class="col-xs-7">
        <textarea rows="4" cols="50" class="form-control"name="address" class="form-control" data-ng-model="credentials.address" id="address" placeholder="Enter Address"></textarea>
      </div>
    </div>
              <div style="margin: 15px">
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-8 ">
               <input type="submit" class="btn btn-primary" value="Create New Associate">
            </div>
        </div>
                 <div data-ng-show="error" class="text-center text-danger">
                    <strong data-ng-bind="error"></strong>
            </div>
    </div>
        </div>
    </div>
    </form>

我的脚本文件 ：： 通过单击按钮移动到下一个选项卡

<script type="text/javascript">
    $('.nexttab').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});
</script>

这是否是最好的方法，但我们通过设置活动标志并拥有选项卡列表来做到这一点。如下所示。

        <tab active="tabs.tab1"></tab>
        <tab active="tabs.tab2"></tab>
        <tab active="tabs.tab3"></tab>
        $scope.tabs = {tab1:false,tab2:false,tab3:false};
        $scope.buttonClick = function(button) {  // button will be the name of the next tab to become active.
           $scope.tabs[button] = true;
        };