angularjs - Using ng-repeat in directive causing form validation not working properly -

in html,

<form name="textform" novalidate>     <cms-radio name="color" require="true" option="[{title:'red', value:'red'},{title:'orange', value:'orange'},{title:'green', value:'green'}]" ng-model="color"></cms-radio> </form> 

in js,

angular.module('cmsradio',[]).directive('cmsradio', function(){ 'use strict';      return {         restrict: 'e',         scope: {             name:'@',             require:'=',             option:"=",             bindedmodel: "=ngmodel"         },         replace:true,             templateurl: 'radio.html'     }; }); 

in radio.html

<div class="form-group" ng-form="{{name}}" ng-class="{'has-error':{{name}}.$invalid && {{name}}.$dirty}" >     <div class="radio" ng-repeat='item in option'>            <label><input type="radio" name="{{name}}" ng-model="bindedmodel" value="{{item.value}}" ng-required="require">{{item.title}}</label>     </div>     <span class="has-error" ng-show='{{name}}.$dirty && {{name}}.$invalid' ng-message='{{name}}.$error'>             <p class="control-label" ng-messsage='require'>{{name}} required.</p>     </span> </div> 

when click on first radio button, shows error follow.

the error disappeared if clicked on 3 radio buttons. how prevent error appeared when 1 of radio button clicked instead of three? help?

edit: solution

in html,

<cms-radio label="color" name="color" require="true" option="[{'answers':[{'title':'red', 'value':'red'},{'title':'orange', 'value':'orange'},{'title':'green', 'value':'green'}],'selectedanswer':null}]" id="color" class=""></cms-radio> 

in js,

 angular.module('cmsradio',[]).directive('cmsradio', function(){     'use strict';          return {             restrict: 'e',             scope: {                 name:'@',                 require:'=',                 option:"="             },             replace:true,                 templateurl: 'radio.html'         };     }); 

in radio.html

<div class="form-group" ng-form="{{name}}" ng-class="{'has-error':{{name}}.$invalid && {{name}}.$dirty}" >         <div ng-repeat="item in option">             <div class="radio" ng-repeat="answer in item.answers">                   <label><input type="radio" name="{{name}}" ng-model="item.selectedanswer" value="{{answer.value}}" ng-required="require">{{answer.title}}</label>             </div>         </div>         <span class="has-error" ng-show='{{name}}.$dirty && {{name}}.$invalid' ng-message='{{name}}.$error'>                 <p class="control-label" ng-messsage='require'>{{name}} required.</p>         </span> </div> 

i not interpolating field names in ng-show , ng-class directives.

rather duplicating scope.name both form , input names, try giving form fixed name (e.g. 'radiolist') e.g.:

<div class="form-group" ng-form="radiolist" ng-class="{'has-error':radiolist[name].$invalid && radiolist[name].$dirty}" >     <div class="radio" ng-repeat='item in option'>            <label><input type="radio" name="{{name}}" ng-model="bindedmodel" value="{{item.value}}" ng-required="require">{{item.title}}</label>     </div>     <span class="has-error" ng-show='radiolist[name].$dirty && radiolist[name].$invalid' ng-message='radiolist[name].$error'>             <p class="control-label" ng-messsage='require'>{{name}} required.</p>     </span> </div> 

update

the answer above misguided. issue had nothing interpolation of name. ng-repeat creating child scope , ng-model did not have '.' in it, , therefore each child scope getting own copy of bindedmodel.

if directive used controlleras option not problem. however, simplest solution here using scope directly compensate child scope using $parent below:

<div class="form-group" ng-class="{'has-error':{{name}}.$invalid && {{name}}.$dirty}" >     <div class="radio" ng-repeat='item in option'>            <label><input type="radio" name="{{name}}" ng-model="$parent.bindedmodel" value="{{item.value}}" ng-required="require && !bindedmodel">{{item.title}}</label>     </div>     <span class="has-error" ng-show="{{name}}.$invalid  && {{name}}.$dirty" ng-messages='{{name}}.$error'>       <p class="control-label" ng-messsage='require'>{{name}} required.</p>     </span> </div> 

updated plunkr