var myApp = angular.module("MyApp", ["ngMessages"]);
<!doctype html>
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="http://code.angularjs.org/snapshot/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/snapshot/angular-messages.js"></script>
<script type="text/javascript" src="angularjs-messages-app.js"></script>
</head>
<body>
<form name="userForm" novalidate>
<div class="field">
<label for="emailAddress">Enter your email address:</label>
<input ng-blur="visitedEmail=true" type="email"
name="emailAddress"
ng-model="data.email"
ng-minlength="5"
ng-maxlength="30"
required />
<div ng-show="visitedEmail && userForm.emailAddress.$dirty && userForm.emailAddress.$error">
<!-- the required message is displayed first... -->
<div ng-show="userForm.emailAddress.$error.required">You forgot to enter your email address...</div>
<!-- then, incase the message is too short, show the message right after -->
<div ng-show="userForm.emailAddress.$error.minlength">Your email address is too short...</div>
<!-- of if is too long then let us know -->
<div ng-show="userForm.emailAddress.$error.maxlength">Your email address is too long...</div>
<!-- otherwise let us know if the email itself is invalid -->
<div ng-show="userForm.emailAddress.$error.email">You did not enter your email address correctly...</div>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>