Using X-editable within UI.Bootstrap tab-heading directive in AngularJs

Question

I have a AngularJs App where we use UI.Bootstrap Tabs to create and delete workspaces.
I'm wanting to use X-editable to edit the name of the workspace/tab but within the tab-header directive:

<tab-heading>
    <span editable-text="item.title">{{item.title}}</span>
</tab-heading>

As it is, it comes up with an inline edit on-click, but does not update the scope on save.

Heres' the fiddle: http://jsfiddle.net/RDfTu/

Answer 1

If you look at the generated html:

<tabset class="ng-isolate-scope ng-scope">

Isolated scopes don't inherit from any scope, so your "item.title" doesn't exist in this scope nor on any scope below it, where your tab headers are, and where x-editable is creating it's controller.