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

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/

Thanks in advance for any help.

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.

I had the same issue and in my case i was able to solve it using blur attribute :

<tab-heading>
   <span editable-text="tab.name" onbeforesave="validate($data)" buttons="no" blur="submit">{{ tab.name}}</span>
 </tab-heading>

Please see the documentation.

Also please see the below code in xeditable.js: 

if (shown[i]._blur === 'submit') {
        toSubmit.push(shown[i]);
      }