title: AngularJS: ngTable with json data: filtering and sorting does not work
body: <p>I'm trying to populate data from a REST webservice in a table using ngTable.
  Data are shown, but they are neither sortable nor filterable. Filtering always returns empty list.</p>
  
  <p>Here is a link to the API I am referencing: <a href="http://bazalt-cms.com/ng-table/" rel="nofollow noreferrer">http://bazalt-cms.com/ng-table/</a></p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$scope.dataInstances = [];
  $scope.getDataInstances = function() {
      $http({
          method : 'GET',
          url : '/rest/v1/data/instances',
          headers : {
              "Authorization" : "Basic " + btoa("USERNAME" + ":" + "PASSWORD")
          },
      })
      .success(function(data, status) {
          $scope.dataInstances = data;
          $scope.tableParams.reload();
          // just some logging 
          console.log(JSON.stringify(data));
      })
      .error(function(data, status) {
          alert("Error: " + status);
      });
  };
  $scope.tableParams = new ngTableParams({
          page: 1,     // show first page
          count: 10,   // count per page
          filter: {
          },
          sorting: {
              date: 'asc'     // initial sorting
          }
      }, 
      {
          total: $scope.dataInstances.length, // length of data
          getData: function($defer, params) {
              // use build-in angular filter
              var filteredData = params.filter() ?
                      $filter('filter')($scope.dataInstances, params.filter()) :
                          $scope.dataInstances;
              var orderedData = params.sorting() ?
                      $filter('orderBy')(filteredData, params.orderBy()) :
                          $scope.dataInstances;
              params.total(orderedData.length); // set total for recalc pagination
              $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
          }
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div ng-controller="myController" ng-init="getDataInstances()"&gt;
    &lt;table ng-table="tableParams" show-filter="true" class="table table-condensed"&gt;
      &lt;tr ng-repeat="dataInstance in dataInstances"&gt;
        &lt;td data-title="'Name'" sortable="'name'" filter="{ 'name' : 'text'}"&gt;{{dataInstance.name}}&lt;/td&gt;
        &lt;td data-title="'Date'" sortable="'date'" filter="{ 'date' : 'text'}"&gt;{{dataInstance.date | date:'dd.MM.yyyy HH:mm' }}&lt;/td&gt;
        &lt;td data-title="'Type'" sortable="'type'" filter="{ 'type' : 'text'}"&gt;{{dataInstance.type}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You have any hints how to get this working? 
  Tried different other possible solutions - and none worked - like:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/22349635/asynchronously-populating-an-angularjs-ngtable-with-json-data">asynchronously populating an AngularJS ngTable with json data</a></li>
  <li><a href="https://stackoverflow.com/questions/21805734/loading-json-via-ajax-with-ngtable-parameters">Loading JSON via AJAX with NgTable parameters</a></li>
  <li><a href="https://stackoverflow.com/questions/22047342/sorting-ngtable-doesnt-work-when-heading-gets-clicked">Sorting ngTable doesn&#39;t work when heading gets clicked</a></li>
  </ul>
  
  <p>Thanks in advance!</p>
  
  <p><strong>EDIT</strong>: <a href="http://plnkr.co/edit/1Rp9szNtw8T3GtwpNaZG?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/1Rp9szNtw8T3GtwpNaZG?p=preview</a></p>