Angularjs - ng-invalid not working correctly on select element inside ng-repeat table

Question

<td level="{{taskCtrl.level}}" check-permissions="noCommercial" ng-if="tEl.id_subtype==1 || tEl.id_subtype==2 || tEl.id_subtype==9 || tEl.id_subtype==10"> 
                    <select id="vpo_{{$index}}" name="vpo_{{$index}}" class="form-control np fs-small" 
                    ng-options="item.id as item.es for item in mainCtrl.vpo"
                    ng-model="tEl.vpo"
                    ng-required="true"
                    ng-change="taskCtrl.toggleVpo(tEl);">
                    <option value="">N.A.</option>
                    </select>
                </td>

The default state for the td above is ng-valid despite no option from the selector list being chosen. As a result, ng-required is not disabling the submit button.

However, when you choose an option and then click back to N.A. (the placeholder option) the element becomes .ng-invalid and the submit form is disabled as desired. It works!

I am aware that this has something to do with ng-repeat and have made various attempts to resolve the problem by wrapping the table row in a form as suggested by various posts here.