index.html
                    
<!DOCTYPE html>
<html ng-app="validation-example">
<head lang="en">
<meta charset="utf-8">
<title>Validation Example Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Welcome</h1>
<div>This is a simple form validation example.</div>
<div class="example">
<form name="form" novalidate>
<span class="label">Name:</span> <input type="text" ng-model="user.name" name="username" required />
<span class="errorText" ng-show="form.username.$error.required">Required</span>
<span class="passText" ng-show="!form.username.$error.required">&#10003;</span>
<br />
<span class="label">E-mail:</span> <input type="email" ng-model="user.email" name="useremail" required/>
<span class="errorText" ng-show="form.useremail.$error.required">Required</span>
<span class="errorText" ng-show="form.useremail.$error.email">Not a valid email</span>
<span class="passText" ng-show="!form.useremail.$error.required && !form.useremail.$error.email">&#10003;</span>
<br/>
<button ng-click="addUser(user)"
ng-disabled="form.$invalid || isDuplicate(user)">ADD</button>
</form>
<div>
<h4>Registered Personnel</h4>
<ul>
<li ng-show="!users.length" class="user">No Personnel</li>
<li ng-repeat="storedUser in users" class="user">
{{storedUser.name}} ---
{{storedUser.email}}
<button ng-click="removeUser(storedUser)">Remove</button>
</li>
</ul>
</div>
</div>
</body>
</html>
                    app.js
                    
var app = angular.module('validation-example', []);
app.controller('MainCtrl', function($scope, UserService) {
$scope.users = UserService.getAllUsers();
$scope.user = {};
$scope.addUser = function(user) {
UserService.addUser(user);
$scope.user = {};
};
$scope.isDuplicate = function(user) {
var found = false;
angular.forEach($scope.users, function(currentUser) {
found = angular.equals(currentUser, user);
if (found) {
return found;
}
});
return found;
};
$scope.removeUser = function(user) {
UserService.removeUser(user);
};
});
// The Service
app.factory('UserService', function() {
var UserService = {};
var users = [];
UserService.getUser = function(index) {
return users[index];
};
UserService.addUser = function(user) {
users.push(user);
};
UserService.removeUser = function(user) {
users.splice(users.indexOf(user), 1);
};
UserService.size = function() {
return users.length;
};
UserService.getAllUsers = function() {
return users;
};
return UserService;
});
                    style.css
                    
/* CSS goes here */
.example {
background: #f5f5f5;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3);
padding: 10px;
margin: 5px;
}
.example input, textarea {
-webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
-moz-transition: border linear 0.2s,box-shadow linear 0.2s;
-ms-transition: border linear 0.2s,box-shadow linear 0.2s;
-o-transition: border linear 0.2s,box-shadow linear 0.2s;
transition: border linear 0.2s,box-shadow linear 0.2s;
color: #555555;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.label {
width: 50px;
display: inline-block;
}
ul {
list-style:none;
}
form input.ng-invalid {
border-color: #bd1a00;
box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
}
form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
.errorText {
color: #bd1a00;
}
.passText {
color: green;
}