title: Angular Bootstrap UI: Input Fields in Tab-Heading
body: <p>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</p>
  
  <pre><code>&lt;uib-tab-heading&gt;
      &lt;div class="pull-left"&gt;
          &lt;span data-ng-if="!editable[$index]"&gt;{{title}}&lt;/span&gt;
          &lt;input data-ng-if="editable[$index]" data-ng-model="titles[$index]"&gt;
      &lt;/div&gt;
      &lt;div class="pull-right"&gt;
          &lt;button data-ng-if="!editable[$index]" data-ng-click="edit($index)"&gt;&lt;span class="glyphicon glyphicon-wrench"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;button data-ng-if="editable[$index]" data-ng-click="save($index)"&gt;&lt;span style="color:green;" class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;/uib-tab-heading&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>