title: angular validation - prevent button ng-click() when form is invalid
body: <p>I have an angular form as part of a single page App. The 'Continue' button moves a user to the next section of the app, and has an ng-click. I would like to prevent this ng-click from happening when the button is clicked and the form is invalid, but I don't want to disable the Continue button. </p>
  
  <p>Example: A user comes to the page and immediately clicks the Continue button without providing a first name. The error message "You should provide a first name" is shown and the user remains on the page.</p>
  
  <p>How can I do this? Here is the code: </p>
  
  <pre><code>&lt;form name="form" novalidate &gt;
  
  &lt;div ng-show="form.FirstName.$touched &amp;&amp; form.FirstName.$error.required" class="errorMessage"&gt;
      You must enter a first name
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="firstName" class="form-label"&gt;First Name&lt;/label&gt;
      &lt;input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required /&gt;
  &lt;/div&gt;
  
  &lt;div class="btn-group"&gt;
      &lt;button ng-click="vm.next()"&gt;Continue&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>