var app = angular.module('plunker', ['ngMessages']);
app.controller('MainCtrl', function($scope) {
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.6/angular.js" data-semver="1.3.6"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.6/angular-messages.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="userForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="name" required ng-minlength="4" />
<div ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<div ng-message="required">入力してください</div>
<div ng-message="minlength">もっと長くして</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" ng-model="email" required ng-maxlength="30" />
<div ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<div ng-message="required">入力してください</div>
<div ng-message="email">形式おかしいよ</div>
<div ng-message="maxlength">もっと短くして</div>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
</form>
</body>
</html>
/* Put your css in here */