<!DOCTYPE html>
<html ng-app='ngMsgDemo'>

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script src='http://code.angularjs.org/1.3.0-beta.8/angular-messages.js'></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='MasterController'>
  <h1>Hello {{welcomeMsg}}!</h1>

  <hr/>
  <strong>Use Case - Ajax Calls</strong>
  <br/>
  <br/>
  <button ng-click='demoAjaxCall()'>Make a ajax call</button>
  <div ng-messages='ajaxRequest'>
    <div ng-message='error'>An Error Occured!</div>
    <div ng-message='success'>The request was a smashing success!</div>
    <div ng-message='inProgress'>Please Wait!</div>
  </div>
  <div>
    <textarea name="ajaxData" ng-model='data' rows="8" cols="40" placeholder='Ajax Call data Will Appear Here'>
    </textarea>
  </div>
  <hr/>
  <strong> Reusing and over-riding messages</strong>
  <br/>
  <br/>
  <form name='demoForm'>
    <div>
      <label for='email'>Email:</label>
      <input type="email" name="email" id="email" placeholder="Enter your email" ng-model='form.email' required/>
      <div class='formMessage' ng-messages='demoForm.email.$error' ng-messages-include='messages.html'></div>
    </div>
    <div>
      <label for='password'>Password:</label>
      <input type="password" name="password" id="password" placeholder="Enter your password" ng-model='form.password' ng-minlength='5' ng-maxlength='15' required/>
      <div class='formMessage' ng-messages='demoForm.password.$error' ng-messages-include='messages.html'>
        <div ng-message='minlength'>This is not a secure password!</div>
      </div>
    </div>
  </form>

</body>

</html>
// Code goes here

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

function MasterController($scope, $timeout) {
  $scope.welcomeMsg = 'AngularJS Messages';
  $scope.ajaxRequest = {
    error: false,
    success: false,
    inProgress: false
  };
  
  $scope.demoAjaxCall = function(){
    $scope.ajaxRequest.inProgress = true;
    $timeout(function(){
      $scope.ajaxRequest.inProgress = false;
      $scope.data = 'This is the data from Ajax Request';
      $scope.ajaxRequest.success = true;
    }, 5000);
  };
}

/* Styles go here */

.formMessage {
  position: relative;
  top: -20px;
  left: 200px;
  font-family: monospace;
  color: blue;
}
<div ng-message='serverError'>Request Failed Due to Server Error!</div>
<div ng-message='notFound'>Not Found!</div>
<div ng-message='inProgress'> Please Wait! </div>
<div ng-message='required'> This field is required! </div>
<div ng-message='minlength'> This field is too short!</div>
<div ng-message='maxlength'> This field is too long!</div>
<div ng-message='email'> Email is not valid!</div>