<!DOCTYPE html>
<html ng-app="app" >

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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="script.js"></script>
  </head>

  <body>
    
    <div ng-controller="TestCtrl">
      <form name="fm" >
        <input 
          name="inputCd"
          type="text" ng-model="data.cd"
          ng-class="{'has-error':fm.inputCd.$invalid}"
          required />
          
          fm.inputCd.$invalid
          ={{fm.inputCd.$invalid}}
      </form>
    </div>
    
  </body>

</html>
(function(){

"use strict";

// create controllers
angular.module("controllers",[]);

angular.module("controllers").
  controller("TestCtrl", function( $scope ){
      
      $scope.data = {
        cd:1234
      };
      
  });

// application boot!
angular.module("app",["controllers"]);

  
})();

html,body {
  background-color:white;
}
body{
  padding: 8px;
}

input[type="text"]{
  font-size: 1.4rem;
  border-radius:4px;
}

ul {
  padding: 4px;
}
li {
  padding:4px;
  list-style: none;
  margin:4px;
  border-bottom: 1px solid rgba( 100, 100, 100, 0.4);
}
.has-error{
  background-color:lightyellow;
  border-color: red;
}