manyi/static/angular-mod/tpl/form_wizard.html

<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">Form Wizard</h1>
</div>
<div class="wrapper-md">
  <tabset class="tab-container" ng-init="steps={percent:20, step1:true, step2:false, step3:false}">
    <tab heading="Step 1" active="steps.step1" select="steps.percent=10">
      <p class="m-b">Use the Bootstrap tab components and ngForm to build the form wizard.</p>
      <progressbar value="steps.percent" class="progress-xs" type="success"></progressbar>
      <h4>Validate Form</h4>
      <form name="step1" class="form-validation">
        <p>Your email:</p>
        <input type="email" name="email" class="form-control" ng-model="email" required ng-change="step1.email.$valid ? (steps.percent=30) : (steps.percent=20)">
        <p class="m-t">Your website:</p>
        <input type="url" name="url" placeholder="http://" class="form-control" ng-model="website" required>
        <div class="m-t m-b">
          <button type="submit" ng-disabled="step1.$invalid" class="btn btn-default btn-rounded" ng-click="steps.step2=true">Next</button>
        </div>
      </form>
    </tab>
    <tab heading="Step 2" disabled="step1.$invalid" active="steps.step2" select="steps.percent=30">
      <form name="step2" class="form-validation">
        <p class="m-b">Continue the next step</p>
        <progressbar value="steps.percent" class="progress-xs" type="success"></progressbar>
        <p>Your age:</p>
        <input type="number" name="age" class="form-control" ng-model="age" required>
        <div class="m-t m-b">
          <button type="button" class="btn btn-default btn-rounded" ng-click="steps.step1=true">Prev</button>
          <button type="submit" ng-disabled="step2.$invalid" class="btn btn-default btn-rounded" ng-click="steps.step3=true">Next</button>
        </div>
      </form>
    </tab>
    <tab heading="Step 3" disabled="step2.$invalid" active="steps.step3" select="steps.percent=60">
      <p class="m-b">Congraduations! You got the last step.</p>
      <progressbar value="steps.percent" class="progress-xs" type="success"></progressbar>
      <p>Just one click to finish it.</p>
      <div class="m-t m-b">
        <button type="button" class="btn btn-default btn-rounded" ng-click="steps.step2=true">Prev</button>
        <button type="button" class="btn btn-default btn-rounded" ng-click="steps.percent=100">Click me to Finish</button>
      </div>
    </tab>
  </tabset>
</div>