Datatables + angular.js + xeditable is not working - angularjs

Question

I am using angular with Datatables and I am trying to edit a row with Xeditable, my issue is that there are no xeditables elements, the span is not turning into editable span.
Here is my code:
<div class="dataTables_wrapper">
<table datatable="ng" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr>
<th>{{texts.fullName}}</th>
<th>{{texts.title}}</th>
<th>{{texts.email}}</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts track by $index">
<td>
{{contact.fullName}}
</td>
<td>
{{contact.title}}
</td>
<td>
<span editable-text="contact.email" e-name="email" e-form="rowform">
{{ contact.email || 'empty' }}
</span>
</td>
<td>
<!-- form -->
<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeUser($index)">del</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I can see that the xeditable code can't find the $editables elements, I thought it is related to datatable because if I'm trying to use regular table it works well.
Any idea on how to fix it?
Best,
Omri

Answer 1

Your editable-text isn't in the editable-form, this might be the problem.
I think the following code would fix it.
<form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline">
<span editable-text="contact.email" e-name="email" e-form="rowform">
{{ contact.email || 'empty' }
</span>
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>