Angular Bootstrap UI: Input Fields in Tab-Heading - angularjs

Question

Again I got a Problem with Angular Bootstrap UI Tabs.
Short description of my problem:
I want the user to create different pages with different titles. After a page is created, I create a new tab with the pagetitle and user can add content. That works fine so far.
Now, in the uib-tab-heading I have an option to edit the page-title
<uib-tab-heading>
<div class="pull-left">
<span data-ng-if="!editable[$index]">{{title}}</span>
<input data-ng-if="editable[$index]" data-ng-model="titles[$index]">
</div>
<div class="pull-right">
<button data-ng-if="!editable[$index]" data-ng-click="edit($index)"><span class="glyphicon glyphicon-wrench"></span></button>
<button data-ng-if="editable[$index]" data-ng-click="save($index)"><span style="color:green;" class="glyphicon glyphicon-ok"></span></button>
</div>
<div style="clear:both;"></div>
</uib-tab-heading>
The button action sets a variable so the input field in the tab appears. That works so far.
But in the input field I only can edit one single letter, then, after input, the input field looses its focus and the tab is changed in a random way.
Is there a common method to disable keyboard interaction with the tabs so I can change the value of the input field without getting the tab changed?

Answer 1

One option is just to force the focus back to the input element whenever it is modified.
See fiddle: https://jsfiddle.net/masa671/2mq3106a/
Markup:
<input data-ng-if="editable[$index]" ng-model="titles[$index]" focus-me>
JavaScript:
.directive('focusMe', function () {
return {
require: 'ngModel',
link: function (scope, elem, attr, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
}, function() {
elem[0].focus();
});
}
};
});

Answer 2

Thanks for your answer!
I modified your fiddle a bit to fit my code.
See fiddle: https://jsfiddle.net/2mq3106a/7/
<div ng-controller="MyCtrl">
<uib-tabset>
<uib-tab class="tabcontent-bordered" data-ng-repeat="pageTitle in titles">
<uib-tab-heading>
<div class="pull-left">
<span data-ng-if="!editable[$index]">{{pageTitle}}</span>
<input id="$index" data-ng-if="editable[$index]" ng-model="titles[$index]" focus-me>
</div>
<div class="pull-right">
<button data-ng-if="!editable[$index]" data-ng-click="edit($index)"><span class="glyphicon glyphicon-wrench"></span></button>
<button data-ng-if="editable[$index]" data-ng-click="save($index)"><span style="color:green;" class="glyphicon glyphicon-ok"></span></button>
</div>
<div style="clear:both;"></div>
</uib-tab-heading>
I am on Tab {{$index}}
</uib-tab>
</uib-tabset>
</div>
I do not lose the focus on the input field, thats works so far, but there is still an other problem.
As you may can see in the fiddle if i change input value of the input field, the other tab gets active state and so the content of the other tab is shown.