javascript - angularJS validation method with custom input boxes -

so have these new custom inputs can found here.

https://scotch.io/tutorials/google-material-design-input-boxes-in-css3

now issue validation had on no longer working.

ideally want line turn red when theres validation issue text undernetih heres code 1 of input boxes

    <input type="text" required placeholder="&#xf040; event title" class="validate" ng-model="data.title">     <span class="fa fa-asterisk req"></span>     <span class="highlight"></span>     <span class="bar"></span>     <!-- <label>event title</label> -->   </div> </div> <div class="speech help-block has-error" ng-messages="details.title.$error" ng-if="details.title.$dirty || detailssubmitted" role="alert">   <div ng-message="required" class="errormsg">please enter title.</div>   <div ng-message="custom" class="errormsg">{{errormessages.title}}</div> </div> 

this example working

 <form action="" method="get" name="details" accept-charset="utf-8">         <input type="text" name="title" required placeholder="event title" class="validate" ng-model="data.title">          <span class="fa fa-asterisk req"></span>         <span class="highlight"></span>         <span class="bar"></span>         <div class="speech help-block has-error" ng-messages="details.title.$error" ng-if="details.title.$dirty || detailssubmitted" role="alert">             <div ng-message="required" class="errormsg">please enter title.</div>             <div ng-message="custom" class="errormsg">{{errormessages.title}}</div>         </div>     </form>