angular modalservice does not respond to enter Key - angularjs

Question

I have the following Modal dialog using ui.boostratp & anuglar modal service
<div id="modalDialog" class="modal-dialog">
<div class="modal-header">
<h2 style="text-align: center">{{modalOptions.headerText}}</h2>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
<button type="button" id="OK" class="btn btn-danger" ng-enter="modalOptions.ok();" autofocus data-ng-click="modalOptions.ok();" data-ng-keyup="$event.keycode == 13 && modaloptions.ok()">{{modalOptions.actionButtonText}}</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
console.log('Modal Template Loaded');
$('#OK').focus();
$("#modalDialog").keydown(function (event) {
console.log("Event mapped")
if (event.keyCode == 13) {
$(this).parent()
.find("button:eq(0)").trigger("click");
return false;
}
});
}); //document
</script>
I tried out multiple ways, but none of it worked.
after the dialog box loads the 'Modal Template Loaded' is logged to console.
the form works using Mouse though, but want it to work for enter key.
how do i get it working for Enter Key ?

Answer 1

I figured out that the Key event were being captured on the Parent form and not in the dialog box.
So i wrote a JavaScript to trigger click from parent window like shown below.
document.onkeypress = function (e) {
console.log("key Press " + e.keyCode);
if (e.keyCode == 13)
$("#ModalOKButton").trigger("click");
};

Answer 2

You can wrap the modal in form tags and then use ng-submit. Note that you should use ng-submit on its own, without ng-click.
Also see this: Angular-UI $dialog and form submit on enter key