angularjs: ng-message always showing

Question

I'm using angular-messages to display form validation errors on my angular app. As per the documentation, I have built the following code

<form name="loginForm">
  <label class="item item-input">
    <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
  </label>
  <div ng-messages="loginForm.email.$error" style="color:maroon">
    <div ng-message="required">Please input a valid e-mail address</div>
    <div ng-message="email">You did not enter your email address correctly...</div>
  </div>
</form>

I have included the ngMessages directive in my javascript as well as imported the angular-messages.js file.

Unfortunately, these two messages are showing perpetually. Regardless of what I type in the input field, be it a valid email or not. Both messages are always showing. If I try to only include one ng-message, the result is the same.

What could I be doing wrong?

edit: In case my description isn't very clear, this is a print of the result https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

Answer 1

You gotta make sure you are actually including ngMessage to your module.

var app = angular.module('app', [
    'ngMessages'
])

... and that you included the library to your project

<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>