Отображение ошибок с угловым ng-повторением

Question

У меня есть следующий код внутри тега формы, я хотел бы, чтобы текст ошибки отображался под флажками, однако на данный момент я не могу заставить его работать с текущей настройкой, которая у меня ниже , Что я здесь делаю неправильно?

продажи билетов/competition_checkboxes.html

<div ng-repeat="compCbx in competitionCheckboxes track by $index"> 
    <input ng-attr-id="cc_comp_{{ $index }}" ng-model="compCbx.isChecked" name="cc_comp" ng-attr-label="cc_comp_label_{{ $index }}" 
      type="checkbox" ng-required="compCbx.checkRequired" ng-checked="compCbx.isChecked" form-blur /> 
    <label ng-attr-id="cc_comp_label_{{ $index }}" ng-attr-for="cc_comp_{{ $index }}" class="fake-label"> 
     <i ng-attr-id="cc_comp_cbx_{{ $index }}"></i> <p ng-bind-html="compCbx.text | to_trusted"></p> 
     <span class="error-msg error-tnc" ng-show="{{formName}}.cc_comp.$touched && {{formName}}.cc_comp.$error.required"> 
      You must agree to enter the competition 
     </span> 
    </label> 
</div> 

Выходной ток на странице

Как вы можете видеть Условия Флажок проверяет правильно, однако это потому, что он не находится в ng-повторе

Положения и условия имеет этот код директиву

<input id="cc_tnc" ng-model="cc_tnc" label="cc_tnc_label" name="cc_tnc" type="checkbox" ng-required="cc_tnc != true" form-blur> 
     <label id="cc_tnc_label" for="cc_tnc" class="fake-label"> 
      <i id="cc_tnc_cbx"></i> <p>I have read and agree to <a href="@Model.TermsUrl" target="_blank">terms and conditions</a></p> 
      <span class="error-msg error-tnc" ng-show="{{ formName }}.cc_tnc.$touched && {{ formName }}.cc_tnc.$error.required"> 
        You must agree to the Terms and Conditions to make a purchase 
      </span> 
     </label> 
<ng-include src="'ticketing/competition_checkboxes.html'"></ng-include> 

Форма Размытие

directive('formBlur', function(setErrorState) { 

     //set element on dirty 
     return { 
      restrict: 'A,E', 
      require: ['^form'], 
      link: function(scope, element, attrs, ctrl) { 

       var form = scope[ctrl[0].$name]; 

       element.bind('blur', function() { 

        scope.$apply(function() { 

         console.log("Error in blur"); 
         form[attrs.name].$touched = true; 
         setErrorState(element, form[attrs.name].$valid); 

        }); 
       }); 

       scope.$watch(form.$name + '.' + attrs.name + '.$valid', function(validity) { 

        console.log("In watch"); 
        console.dir(form[attrs.name]); 
        if (form[attrs.name].$touched) 
         setErrorState(element, validity); 

       }); 
      } 
     }; 
    }) 

Answer 1

Изменение ng-required="compCbx.checkRequired" к required="compCbx.checkRequired"

Jsfiddle working sample

Я не знаю, почему это работает;)