title: Clicking a button within a form causes page refresh
body: <p>I have a form in Angular that has two buttons tags in it. One button submits the form on <code>ng-click</code>. The other button is purely for navigation using <code>ng-click</code>. However, when this second button is clicked, AngularJS is causing a page refresh which triggers a 404. I’ve dropped a breakpoint in the function and it is triggering my function. If I do any of the following, it stops:</p>
  
  <ol>
  <li>If I remove the <code>ng-click</code>, the button doesn’t cause a page refresh.  </li>
  <li>If I comment out the code in the function, it doesn’t cause a page refresh.  </li>
  <li>If I change the button tag to an anchor tag (<code>&lt;a&gt;</code>) with <code>href=""</code>, then it doesn’t cause a refresh.</li>
  </ol>
  
  <p>The latter seems like the simplest workaround, but why is AngularJS even running any code after my function that causes the page to reload? Seems like a bug.</p>
  
  <p>Here is the form:</p>
  
  <pre><code>&lt;form class="form-horizontal" name="myProfile" ng-switch-when="profile"&gt;
    &lt;fieldset&gt;
      &lt;div class="control-group"&gt;
        &lt;label class="control-label" for="passwordButton"&gt;Password&lt;/label&gt;
        &lt;div class="controls"&gt;
          &lt;button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()"&gt;Change&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="buttonBar"&gt;
        &lt;button id="saveProfileButton" class="primaryButton" ng-click="saveUser()"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the controller method:</p>
  
  <pre><code>$scope.showChangePassword = function() {
    $scope.selectedLink = "changePassword";
  };
  </code></pre>