title: Datatables search, filter, and export with Firebase
body: <p>I have a CRUD app powered by angular. Recently I added datatables to it in order  to search, filter, sort,export and hide columns using the power of datatables. Unfortunately it returns the Firebase references in the various columns <code>{{contact.name}}</code> <code>{{contact.email}}</code> (There are 4 more columns) when I use any datatables feature such as search it returns the Firebase reference instead of a field. Is there a way to fix this? I really need those datatable features at the same time use Firebase.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $('#contacts').DataTable( {
          dom: 'Bfrtip',
          buttons: [
              'copyHtml5',
              'excelHtml5',
              'csvHtml5',
              'pdfHtml5'
          ]
      } );
  } );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="contacts" class="table table-striped table-hover" &gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Phone&lt;/th&gt;
        &lt;th&gt;Area&lt;/th&gt;
        &lt;th&gt;Occupation&lt;/th&gt;
        &lt;th&gt;E-mail&lt;/th&gt;
        &lt;th&gt; Actions &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="contact in contacts"&gt;
        &lt;td&gt;{{contact.name}}&lt;/td&gt;
        &lt;td&gt;{{contact.phone}}&lt;/td&gt;
        &lt;td&gt;{{contact.area}}&lt;/td&gt;
        &lt;td&gt;{{contact.work}}&lt;/td&gt;
        &lt;td&gt;{{contact.email}}&lt;/td&gt;
        &lt;td&gt;&lt;a href="#/edit/{{contact.$id}}" class="btn btn-raised btn-xs btn-warning"&gt;Edit&lt;/a&gt; &lt;a class="btn btn-raised btn-xs btn-danger" ng-click="removeContact(contact.$id)"&gt;Delete&lt;/a&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>EDIT</strong></p>
  <p>Will sourcing the data via ajax sort this out. This is the json format i get from the ajax GET request</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{"-KIZ6VnucsKbKjlaE8aq":{"area":"Parklands","email":"tttt","name":"Mohammed Sohail","phone":"+254700000000","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"}}</code></pre>
  </div>
  </div>
  </p>
  <p>And this is how the data looks like on the console.</p>
  <p>Any help to use data tables will be appriciated.</p>
  <p><a href="https://i.stack.imgur.com/pJoUi.png" rel="nofollow noreferrer">FireBase database image</a></p>