title: How to move to next tab on click of a button when using angularjs tab
body: <p>I'm trying to move to the next tab by clicking on a button like "save and continue". I want to create a button to move to the next tab. Every tab contains some text boxes. </p>
  
  <p>When the user fills the last textbox of tab 1 and clicks on the "save and continue" button, I want to display tab2. When the user reachs tab3 I want to hide the "save and continue" button. </p>
  
  <p>How to solve this problem?</p>
  
  <p>Html code is </p>
  
  <pre><code>&lt;ul class="nav nav-tabs col-xs-offset-2 col-md-offset-2 "&gt;
      &lt;li class="active"&gt;&lt;a href="#info-tab" data-toggle="tab"&gt;Information &lt;i class="tabs"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href="#personalinfo-tab" data-toggle="tab"&gt;Personal Information &lt;i class="tabs"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#address-tab" data-toggle="tab"&gt;Address &lt;i class="tabs"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
    &lt;div class="margintop"&gt;&lt;/div&gt;
  
          &lt;form name="userForm"  class="signin form-horizontal col-xs-offset-2 col-md-offset-0" novalidate autocomplete="off"&gt;
  &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane active" id="info-tab"&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="firstName"&gt;First Name:&lt;/label&gt;
        &lt;div class="col-xs-7"&gt;
          &lt;input type="text" required id="firstName" name="firstName" class="form-control" id="firstName"  data-ng-model="credentials.firstName" placeholder="First Name"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="lastName"&gt;Last Name:&lt;/label&gt;
        &lt;div class="col-xs-7"&gt;
          &lt;input type="text" class="form-control" name="lastName" class="form-control" data-ng-model="credentials.lastName" id="lastName" placeholder="Last Name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="inputEmail"&gt;Email:&lt;/label&gt;
        &lt;div class="col-xs-7"&gt;
          &lt;input type="email" class="form-control"name="email" class="form-control" data-ng-model="credentials.email" id="inputEmail" placeholder="Email"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="lastName"&gt;User Name:&lt;/label&gt;
        &lt;div class="col-xs-7"&gt;
          &lt;input type="text" class="form-control"  name="username" class="form-control" data-ng-model="credentials.username" id="userName" placeholder="User Name"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tab-pane" id="personalinfo-tab"&gt;
               &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="gender"&gt;Gender:&lt;/label&gt;
        &lt;div class="col-xs-6"&gt;
          &lt;input type="radio" ng-model="credentials.gender" value="Male" /&gt;Male
              &lt;input type="radio" ng-model="credentials.gender" value="Female" /&gt;Female
        &lt;/div&gt;
      &lt;/div&gt;
  
               &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="designation"&gt;Designation:&lt;/label&gt;
        &lt;div class="col-xs-7"&gt;
          &lt;input type="text" class="form-control"  name="designation" class="form-control" data-ng-model="credentials.designation" id="designation" placeholder="Enter Designation"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="tab-pane" id="address-tab"&gt;
          &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="mobile"&gt;Mobile No:&lt;/label&gt;
        &lt;div class="col-xs-7"&gt;
          &lt;input type="text" class="form-control" name="mobile" class="form-control" data-ng-model="credentials.mobile" id="mobile" placeholder="Enter Mobile No"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-xs-3 col-md-3" for="address"&gt;Address:&lt;/label&gt;
        &lt;div class="col-xs-7"&gt;
          &lt;textarea rows="4" cols="50" class="form-control"name="address" class="form-control" data-ng-model="credentials.address" id="address" placeholder="Enter Address"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
           &lt;div style="margin: 15px"&gt;
          &lt;div class="form-group"&gt;
  
              &lt;div class="col-xs-offset-3 col-xs-8 "&gt;
                 &lt;input type="submit" class="btn btn-primary" data-ng-click="adduser()" value="Create New Associate"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
                   &lt;div data-ng-show="error" class="text-center text-danger"&gt;
                      &lt;strong data-ng-bind="error"&gt;&lt;/strong&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
      &lt;/div&gt;
  
              &lt;button class="btn btn-small" ng-click="proceed()"&gt;save and continue&lt;/button&gt;
  
  
      &lt;/form&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript code </p>
  
  <pre><code>$scope.proceed = function() {
  
  
  
  };
  </code></pre>