Repeated forms per table row using Angularjs - html

Question

So...I have literally scoured the internet looking for a solution to this problem and haven't found any answer that directly (or indirectly) suggests an answer.
I am trying to create multiple forms within a table with each row being wrapped in <form> tags like so
<tr ng-repeat="item in items">
<form ng-submit="updateItem(item)">
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button>Submit</button></td>
</form>
</tr>
It seemed to work as intended until I realized that ng-repeat was not wrapping the <form> tag around the <td> tags and it ended up looking like so
<tr ng-repeat="item in items">
***<form ng-submit="updateItem(item)"></form>*** //The form tags were unwrapped
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td>
***<button>Submit</button>*** //Buttons don't submit cos no form
</td>
</tr>
whilst what I really want to achieve is something like
<tr>
<form>
<td>
<button>Hi</button>
</td>
</form>
</tr>
<tr>
<form>
<td>
<button>Hello</button>
</td>
</form>
</tr>
I would really love some help with how to deal with this.

Answer 1

You can unite cells:
<tr ng-repeat="item in items">
<td colspan="3">
<form ng-submit="updateItem(item)">
...
</form>
</td>
</tr>
Or use ngForm directive instead of form (and add submit on enter manually):
<tr ng-repeat="item in items" ng-form="myForm">
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button type="button" ng-click="updateItem(item)">Submit</button></td>
</tr>

Answer 2

You can add a new table in every row like this;
<table>
<tr ng-repeat="item in items">
<td>
<form ng-submit="updateItem(item)">
<table>
<tr>
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button>Submit</button></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

Answer 3

Well, thanks to #pegatron and the Stack Overflow link he provided using #tjbp answer I ended up using the form attribute of input fields and that did it for me. Though its not been tested on all browsers, it does the trick of HTML5 validations. Here's what I ended up with.
<tr ng-repeat="item in items">
<form ng-submit="updateItem(item)" id="{{item.title}}">
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button form="{{item.title}}">Submit</button></td>
</form></tr>
And with this the form and its linked inputs gets sent with the button click.
Thanks.