Inject ngMessages for the form validation
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="http://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.1/angular-messages.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header"> <a class="navbar-brand" href="/">AngularJS</a> </div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-controller="mainController">
<form name="myForm">
<label> Enter text:
<input type="email" ng-model="field" name="myField" required maxlength="15" /> </label>
<div ng-messages="myForm.myField.$error" role="alert">
<div ng-message="required">Please enter a value for this field.</div>
<div ng-message="email">This field must be a valid email address.</div>
<div ng-message="maxlength">This field can be at most 15 characters long.</div>
</div>
</form>
</div>
</div>
</body>
</html>
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('mainController', function($scope) {
});