Button press fired on angular form submit

Question

I have a form with an input text field as well as a button. I'd like to capture the user pressing enter in the text field - not to submit the form, but to trigger another action. The button has its own separate click handler that for some reason gets fired when I press enter in the text field.

example: http://jsfiddle.net/T8zLq/1/

<form onsubmit="return false" ng-submit="mysubmit()" ng-controller="TestCtrl" ng-app="Test">
    <input type="text" />
    <button ng-click="test()">X</button>
</form>

var app=angular.module("Test", []);

app.controller("TestCtrl", ["$scope", function($scope) {
    $scope.test = function() {alert('lol');  };
    $scope.mysubmit = function() {alert('submit');};
}]);

Why does this happen?

Answer 1

set type='button' to your button

<form ng-submit="mysubmit()" ng-controller="TestCtrl">
    <input type="text" />
    <button ng-click="test()" type='button'>X</button>
</form>

Demo

More