How to render a column with model binding using angular-datatables?

Question

Is there a way to render a column with model binding in textbox using DTColumnBuilder?

Something like:

DTColumnBuilder.newColumn('ColumnName').withTitle('Column Name').renderWith(function (data) {
   return '<input type="text" ng-model="ColumnName" />';
}),

Answer 1

No. You can render the table with (example) :

DTColumnBuilder.newColumn('firstName', 'First name')
  .renderWith(function (data) {
       return '<input type="text" ng-model="json.firstName" />'
}),

but the ng-model is never recognized because it is not angular itself that do the rendering. If you let angular do the rendering, i.e datatable="ng" and ng-repeat it works :

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns">
   <tr ng-repeat="item in json">
       <td>{{ item.id }} </td>
       <td><input ng-model="item.firstName"/></td>
       <td>{{ item.lastName }} </td>
   </tr>
</table> 

demo -> http://plnkr.co/edit/f0ycjJvsACaumY13IVUZ?p=preview
notice that the JSON items is updated when you are editing in the input boxes.