index.html
                    
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Form validation Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="index.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body ng-controller="Ctrl">
<form name="myForm" novalidate class="form-horizontal">
<div class="control-group" ng-class="{error: isInvalid('name')}">
<label>Name:</label>
<input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
<span ng-show="isInvalid('name')" class="help-inline">Name is required</span>
<span ng-show="isValid('name')">Great!</span>
</div>
</form>
<hr />
User: {{user | json}}
</body>
</html>
                    index.js
                    
function Ctrl($scope) {
$scope.isInvalid = function(field){
return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
};
$scope.isValid = function(field){
return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
};
$scope.user = {};
$scope.$watch('myForm', function(){
console.log('$scope.myForm', $scope.myForm);
});
}
                    main.css
                    
.error {
background-color: red;
}