form.html

<div class="row">
<div class="col-sm-8 col-sm-offset-2">

  <div id="form-container">

      <div class="page-header text-center">
          <h2>My Company Name</h2>

          <!-- the links to our nested states using relative paths -->
          <!-- add the active class if the state matches our ui-sref -->
          <div id="status-buttons" class="text-center">
              <a ui-sref-active="active" ui-sref=".patient"><span>1</span> Patient</a>
              <a ui-sref-active="active" ui-sref=".symptoms"><span>2</span> Symptoms</a>
              <a ui-sref-active="active" ui-sref=".diagnosis"><span>3</span> Diagnosis</a>
              <a ui-sref-active="active" ui-sref=".payment"><span>4</span> Payment</a>
          </div>
      </div>

      <!-- use ng-submit to catch the form submission and use our Angular function -->
      <form id="signup-form" ng-submit="processForm()">
          <!-- our nested state views will be injected here -->
          <div id="form-views" ui-view></div>
      </form>

  </div>

  <!-- show our formData as it is being typed -->
  <pre>
    {{ formData }}
  </pre>

</div>
</div>