ng messages inside repeater not appearing

Question

I have created a directive that what does is to basically displays blank inputs to fill in an array of objects. The objects have multiple properties, but here I am only filling the projectname property.

<div ng-repeat="projectStatus in projectStatusList track by $index">
<md-input-container>
    <label>Project Name {{$index +1}}</label>
    <input ng-model="projectStatusList[$index].projectName" name="projectName_{{$index+1}}" ng-required="isRowRequired($index)">
    <div ng-messages="parentForm['projectName_{{$index+1}}'].$error">
        <div ng-message="required">The project name is required</div>
    </div>
</md-input-container>
</div>

This directive is being called inside a form which is being passed to it as parentForm. I have already checked and the form is being passed correctly to the directive. My suspicion is that the binding in ng-messages="parentForm['projectName_{{$index+1}}'].$error"is not happening correctly. Whenever I inspect the generated HTML nothing appears inside the ng messages div.

Also, the required property of the field is set dynamically through isRowRequired($index) and this is rendering correctly. The issue is that the input becomes underlined with a red border when empty and required but the messages just dont appear.

Answer 1

Try:

<div ng-messages="parentForm['projectName_' + $index + 1].$error">