Cacher is the code snippet organizer for pro developers

<form name="userForm">
  <div class="field">
    <label for="emailAddress">Enter your email address:</label>
    <input type="email"
           name="emailAddress"
           ng-model="data.email"
           ng-minlength="5"
           ng-maxlength="30"
           required />

    <div ng-messages="userForm.emailAddress.$error">
      <!-- the required message is displayed first... -->
      <div ng-message="required">You forgot to enter your email address...</div>

      <!-- then, incase the message is too short, show the message right after -->
      <div ng-message="minlength">Your email address is too short...</div>

      <!-- of if is too long then let us know -->
      <div ng-message="maxlength">Your email address is too long...</div>

      <!-- otherwise let us know if the email itself is invalid -->
      <div ng-message="email">You did not enter your email address correctly...</div>
    </div>
  </div>

  <input type="submit" />
</form>