Angular JS search filter is not filtering the data by using Firebase

Question

The problem I am encountering is that the search filter does not filter the table. Any advice or help of what the issue can be? The application I am making is simple, the user shall input two text strings and save it so data can be stored in firebase database. Then filter the able by searching. However, the searching does not work.

Click here to access plunker

Index.html

 <table class="table table-bordered">
  <thead>
    <th>Plate Number</th>
    <th>Car Brand</th>
  </thead>
  <tbody>
    <tr ng-repeat="customer in customers | filter:search">
      <td>{{customer.CustomerPlateNumber}}</td>
      <td>{{customer.CustomerCarBrand}}</td>
    </tr>
  </tbody>
</table>

script.js (Using firebase)

angular.module('myApp', []);

angular.module('myApp').controller('customerCtrl', function($scope) {

  $scope.CustomerPlateNumber = "";
  $scope.CustomerCarBrand = "";
  $scope.customers = {};

  $scope.myData = new Firebase("https://sizzling-torch-2102.firebaseio.com/CustomerInformation");

  // PS, husk at CustomerPlatenumber: må være lik navnet på ng-model. 
  $scope.saveCustomerData = function() {
    $scope.myData.push({CustomerPlateNumber: $scope.CustomerPlateNumber, CustomerCarBrand: $scope.CustomerCarBrand});

  // Empty input after storing data
  $scope.CustomerPlateNumber = "";
  $scope.CustomerCarBrand = "";

  };

  // Two parameters, needs to know what its going to be fired upon, and a function that tells what to do when it is fired. 
  $scope.myData.on('value', function(snapshot) {
    $scope.customers = snapshot.val();
    //not recommended, look at "refresh bindings angular"
    $scope.$apply(); 
  });

});

Answer 1

The problem is that $scope.customers is not an array [] but a complex JavaScript object {}.

If you changed it to:

$scope.customers=[];

And converted the complex hash table that Firebase is returning to an Array, it works (for sake of explanation, I'd first check if Firebase has a method to return an array rather than using this particular explanatory code):

$scope.myData.on('value', function(snapshot) {
var values = snapshot.val();
for(var myVal in values)
{
  var item = values[myVal];

  $scope.customers.push(item);
}
});