<!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>
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);
  });
  
}
.error {
  background-color: red;
}