angularjs - Datatables search, filter, and export with Firebase -

i have crud app powered angular. added datatables in order search, filter, sort,export , hide columns using power of datatables. unfortunately returns firebase references in various columns {{contact.name}} {{contact.email}} (there 4 more columns) when use datatables feature such search returns firebase reference instead of field. there way fix this? need datatable features @ same time use firebase.

$(document).ready(function() {      $('#contacts').datatable( {          dom: 'bfrtip',          buttons: [              'copyhtml5',              'excelhtml5',              'csvhtml5',              'pdfhtml5'          ]      } );  } );

<table id="contacts" class="table table-striped table-hover" >    <thead>      <tr>        <th>name</th>        <th>phone</th>        <th>area</th>        <th>occupation</th>        <th>e-mail</th>  	  <th> actions </th>      </tr>    </thead>    <tbody>      <tr ng-repeat="contact in contacts">        <td>{{contact.name}}</td>        <td>{{contact.phone}}</td>        <td>{{contact.area}}</td>        <td>{{contact.work}}</td>        <td>{{contact.email}}</td>        <td><a href="#/edit/{{contact.$id}}" class="btn btn-raised btn-xs btn-warning">edit</a> <a class="btn btn-raised btn-xs btn-danger" ng-click="removecontact(contact.$id)">delete</a></td>        </tr>    </tbody>  </table>

edit

will sourcing data via ajax sort out. json format ajax request

{"-kiz6vnucskbkjlae8aq":{"area":"parklands","email":"tttt","name":"mohammed sohail","phone":"+254711777734","work":"ttt"},"-kid6oc2gowiacuid9yk":{"area":"dfgdfg","email":"dfgdf","name":"dfg","phone":"dfgdfg","work":"fdfffffff"},"-kid6rqo0b6w0jachhwm":{"area":"dfgdfgdfgdf","email":"dfgdfgdfgdfg","name":"dfgfdgdf","phone":"gdfgdfgdfg","work":"gdfgdfgdfgdfg"},"-kiqmyzubpyhaqdqeywo":{"area":"dfgfdg","email":"fgfdgfdgdf","name":"fgfg","phone":"fdgdg","work":"fgdfgdf"},"-kiqn5qabmxrtgovgqv1":{"area":"bla","email":"weadasda","name":"bla","phone":"bla","work":"bla"}}

and how data looks on console.

any use data tables appriciated.

firebase database image

so, question turning (firebase) json object of objects unknown object entry names such kid6rqo0b6w0jachhwm more plain structure can used along datatables , ng-repeat?

you can format contacts array of plain objects way :

$http.get('firebase.json').then(function(json) { //faked response firebase   $scope.contacts = []   (var item in json.data) {     $scope.contacts.push(json.data[item])    } })  

now ng-repeat work , markup (or contacts data) understandable datatables. turn angular-datatables (angular directives jquery datatables) thing need include datatables dependency , include datatable directive in markup :

<table datatable="ng" class="table table-striped table-hover" > 

demo -> http://plnkr.co/edit/tn9cuka46vs4x8chebjb?p=preview