angularjs - Directive with input and form validation issues -

i have form lot of input field. i've thought idea refactor group of fields use , bounded related fields in directive. form this:

  <form name="aform">      <input type="number" name="avalue" ng-model="avalue" min="1" max="10" ng-class="{'has-error' : aform.avalue.$invalid}"/>      <directive directive-model="anothervalue"></directive>   </form> 

the directive tag, put 2 tags input pretty similar 1 of line 2. when validation happen work fine. problem first input field colored has-error class (plunker). why happens? how can correct issue?

the directive gets isolate scope. (in template) wrap form controls inside ng-form directive , validation on form:

<ng-form name="directiveform">   <input      type='number'      name='anothervalue'      min='1' max='10'      ng-model='anothervalue.first'      ng-class="{'has-error' : directiveform.anothervalue.$invalid}" />    <input      type='number'      name='asecondvalue'      min='1' max='10'      ng-model='anothervalue.second'      ng-class="{'has-error' : directiveform.asecondvalue.$invalid}" />  </ng-form>