title: Angular validation of dependent text field in an ngRepeat tag
body: <p>I have the following ngRepeat code:</p>
  
  <pre><code>&lt;div ng-repeat="drug in drugs | orderBy:'drugName'"&gt;
      &lt;input id="{{drug.drugName}}"
          class="drugCheckbox" 
          name="{{drug.drugName}}"
          type="checkbox" value="{{drug.drugName}}"
          ng-model="foobar"
          validate-foo
          /&gt;
      {{drug.drugName}}
      &lt;!-- this is the error message, one per each repeat element --&gt;
      &lt;span style="color:red" ng-show="myForm.{{drug.drugName}}.$error.summary"&gt;
          Fill in the summary
      &lt;/span&gt;
  
      &lt;input type="text"
          name="summary-{{drug.drugName}}"
          id="summary-{{drug.drugName}}"
          placeholder="Summary"/&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My validateFoo directive:</p>
  
  <pre><code>app.directive('validateFoo', function(){
    return{
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, elem, attr, ctrl) {
  
          ctrl.$parsers.unshift(function (viewValue) {
              var id= attr.id;
              //if the checkbox is checked, see if the text field has been filled in
              if(viewValue) {
                  var val= document.getElementById('summary-' + id).value;
                  if(val.length == 0) {
                      ctrl.$setValidity("summary", false);
                      return undefined;
                  }
                  else {
                      ctrl.$setValidity(id, true);
                      return viewValue;
                  }
              }
  
          });
      }
    }
  });
  </code></pre>
  
  <p>I cannot get the validation to work for any of the checkboxes, I am not clear on what to use for "ng-show" in the error message span element.</p>