Duplicate form names in ng-repeat - angularjs

Question

I have a form editQuoteCardForm within an ng-repeat that is repeated multiple times. The form is tied to the editQuoteCard model. When a user clicks the edit button, the form is prepopulated with the correct data for the current model.
The problem I'm having is that I can't validate the form by calling editQuoteCardForm.$valid because there are multiple instances of editQuoteCardForm in the DOM. In fact, if I call $scope.editQuoteCardForm within a debugger session, it returns undefined.
My question is, how can I properly handle the form name within an ng-repeat in such a way that I can validate the form?
Here is the code for my form:
<div ng-repeat="c in quoteCards" style="display:none;" id="{{'edit_quote_card_' + c.id + '_form_container'}}">
<div class="row" id="{{'edit_quote_card_' + c.id + '_form'}}">
<div class="col-lg-12">
<div class="row-scrollable" ng-show="view === 'quote-card'">
<div class="col-lg-12">
<form accept-charset="UTF-8" name="editQuoteCardForm" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" ng-model="editQuoteCard.token">
<input name="id" type="hidden" ng-model="editQuoteCard.id">
<div class="form-group">
<label>Title</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="title" ng-model="editQuoteCard.title" required>
</div>
<div class="form-group">
<label>Attribution</label>
<br style="clear:both;" />
<input type="text" class="form-control" name="attribution" ng-model="editQuoteCard.attribution">
</div>
<div class="form-group">
<label>Quote</label>
<br style="clear:both;" />
<textarea rows="3" class="form-control" name="quote" ng-model="editQuoteCard.quote" required></textarea>
</div>
<div class="form-group">
<label>Media</label>
<br style="clear:both;" />
<input type="hidden" class="form-control" name="photo" ng-model="editQuoteCard.image">
<input type="hidden" class="form-control" name="video" ng-model="editQuoteCard.video">
<div class="profile-builder attachment">
<div ng-show="editQuoteCard.video" class="content video-content result iframe">
<div class="caption delete-btn" ng-click="editQuoteCard.video = undefined;">
<i class="fa fa-times"></i>
</div>
<iframe ng-if="editQuoteCard.video.media_type === 'Youtube'" ng-src="{{editQuoteCard.video.media_url + '?showinfo=0&autohide=1' | trustAsResourceUrl}}" frameborder="0" id="ytplayer" type="text/html"></iframe>
<iframe ng-if="editQuoteCard.video.media_type === 'Vimeo'" ng-src="{{editQuoteCard.video.media_url + '?badge=0&byline=0&title=0' | trustAsResourceUrl}}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div ng-show="editQuoteCard.image" class="content result">
<div class="delete-btn" ng-click="editQuoteCard.image = undefined;">
<i class="fa fa-times"></i>
</div>
<div class="image-container" ng-style="{'background-image': 'url(' + editQuoteCard.image.image_url + ')'}"></div>
</div>
</div>
</div>
<br style="clear:both;" />
<div class="form-group">
<input class="btn btn-primary" style="float:right;" name="commit" type="submit" value="Update Card" ng-disabled="editQuoteCardForm.$invalid">
<div class="btn btn-default" style="float:right;margin-right:10px;" ng-click="openMediaBrowser({type: c.class, id: c.id, index: $index});" ng-show="!editQuoteCard.image && !editQuoteCard.video">Add Media</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can create name for each form dynamically.
<form accept-charset="UTF-8" name="editQuoteCardForm{{$index}}" ng-submit="update({card: editQuoteCard, type: 'quote_card'})" novalidate>
</form>
So, your forms will be named,
editQuoteCardForm0, editQuoteCardForm1, editQuoteCardForm2 etc.