angularjs - keep focus on input when clicked on a button

Question

I'm trying to keep the focus on the textarea when click on one div a button .

<input type="text" ng-model="myText" id = "area1" ></input>

And my buttons are dynamically generated by template in a directive as,

 <my-buttons > </my-buttons>

app.directive('myButtons', function () {
    return {
        restrict: "E",
        templateUrl: "templates/buttons.html"
        link: function ($scope) {}
    };
});

Template is

<div>
    <div>
        <div ng-click="submitResult();">
            <div ng-style="color:red"> <span>OK</span>
            </div>
        </div>
    </div>
</div>

when I click on submit it removes the focus from the input but I want that the focus to remain on the input where it was. I know that we can set the focus by

document.getElementById("id").focus();

Do I have to add a attribute to the myButtons directive and pass the id of the input or there is any other workaround in angularjs . There can be many number of such input and buttons on the page.

Answer 1

There is no angular method to tell an element not to loose focus even when another control needs focus. You need to implement this functionality yourself by manually handling blur event.

Answer 2

Following Charlie's answer, and as a suggestion to get what you want done, try keeping track of who's currently focused. On button click, return the focus to the element that was last focused.