Edit form in AngularUi Tab Heading doesn't react to mouse click

[Zoid-dr]

I use xeditable in AngularUI Tab.

<uib-tab-heading>
    <span editable-text="heading1" buttons="no" blur="submit" e-form="textBtnForm1" ng-dblclick="textBtnForm1.$show()">{{ heading1 || 'empty' }}</span>
</uib-tab-heading>

The submit button on the edit form didn't work so I used this solution

But I still have another problem: mouse don't work inside edit form. Text coursor isn't set on mouse click and text isn't selected by mouse.

Plunker example

[ckosloski]

Did you see the Known Issues section of ui-tabs? Could be the issue:

Known issues To use clickable elements within the tab, you have override the tab template to use div elements instead of anchor elements, and replicate the desired styles from Bootstrap's CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.

[Zoid-dr]

Mea culpa. Thanks, it works.

<uib-tab index="0" template-url="mytab.html">
   <uib-tab-heading>
      <span editable-text="heading1" buttons="no" blur="submit" e-form="textBtnForm1" ng-dblclick="textBtnForm1.$show()">{{ heading1 || 'empty' }}</span>
     </uib-tab-heading>
      content 1
</uib-tab>

<script type="text/ng-template" id="mytab.html">
   <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item">
      <div href ng-click="select($event)" class="nav-link" uib-tab-heading-transclude>{{heading}}</div>
   </li>
</script>

[LegendOfFire]

Thank you! It's solved.