ngblur and enter event : why on enter key two http calls go?

Question

I have a form in which I have enter-key press event and ng-blur. It's like when a user enters something and click elsewhere the form is submitted similarly if a user writes something and press enter the form is submitted and API call goes.

Problem Statement

It works fine on ng-blur only a single call goes to the API. But when I try to use key event two calls go. That's why two success messages show. I don't know why but it acting like that.

Form

input ng-model="cusBoard.boardData.musicalWorkName"
      id="superTitleInput" class="title-edit-input superTitle-input" type="text"
      maxlength="50"
      my-key-enter="cusBoard.updateInfo()"
      ng-blur="cusBoard.updateInfo()">

My-key-enter Directive

app.directive('myKeyEnter', function () {
return {
    controller: 'SignInController',
    link: function (scope, elements, attrs) {
        elements.bind('keydown keypress', function (event) {
            if (event.which === 13) {
                scope.$apply(function () {
                    scope.$eval(attrs.myKeyEnter);
                });
                event.preventDefault();
            }
        });
    }
}

controller function

function updateInfo(){
    editable('superTitle',0);
    var params = {
        superTitle : cusBoard.boardData.musicalWorkName,
        boardId : cusBoard.boardData._id
    };
    CastingBoard.updateSuperTitle(params).then(function (res) {
        if (res.msgCode === '405') {
            $mdToast.show($mdToast.simple().textContent("Board title updated successfully.").position('bottom right'));
        }
    });   
}

Answer 1

You're binding to both the keydown and keypress events:

        elements.bind('keydown keypress', function (event) {

Both events are fired for the Enter key, so the handler is executed twice.

Just pick one, or the other.