I'm using a form within a table so I can submit some data in row. When I'm in my production/dev environment the form looks as follows. (I use route provider to assign the controller) Everything initially works as expected except that I cannot submit the form when pressing enter.
HTML
<table>
<tr>
<form novalidate ng-submit="addResult(selectedFencer)">
<td>
<input type="search" ng-model="selectedFencer" typeahead="fencer for fencer in fencers" placeholder="Type the fencers name" />
</td>
<td>
<input type="submit" value="Submit" class="button" />
</td>
</form>
</tr>
</table>
Controller
angular.module('RankingsApp')
.controller('CompetitionController', function($scope) {
$scope.fencers = ["Scott","Laura", "James"];
$scope.addResult = function(fencer) {
alert(fencer)
};
});
However, if I put the same code into a plunker/standalone html file it works as expected with the form being submitted when enter is pressed.
http://plnkr.co/edit/3385qhpExge4S5ZdPs1E?p=preview
I initially assumed that my issue was to do with a code error, but if I move the form outside the table in my production code it works as expected.
<form novalidate ng-submit="addResult(selectedFencer)">
<table>
<tr>
<td>
<input type="search" ng-model="selectedFencer" typeahead="fencer for fencer in fencers" placeholder="Type the fencers name" />
</td>
<td>
<input type="submit" value="Submit" class="button" />
</td>
</tr>
</table>
</form>
Has anyone any suggestion on either how I could fix this or a direction I could take to debug it?
