title: What is the proper way to use filters?
body: <p>I get an issue using <code>$filter('filter')</code> of AngularJS. It seems not working when I have an empty cell in the line...</p>
  
  <p>When a cell is empty on a line if I add a filter it works but when removing the filter the line with the empty cell is deleted from <code>contacts</code>...</p>
  
  <p>AngularJS script :</p>
  
  <pre><code>app.controller("ContactNgController", function($scope, $http, $filter, $document) {
    $http.get('/api/mes-contacts').success(function(data, status, headers, config) {
      $scope.contacts = data.contacts;
      $scope.filteredContacts = data.contacts;
      $scope.nbContacts = data.contacts.length;
      $scope.limit = data.limit;
  
      $scope.onChange = function(){
        $scope.contacts = data.contacts;
        $scope.filteredContacts = $filter('filter')($scope.contacts, $scope.search);
      };
    });
  });
  </code></pre>
  
  <p>Table HTML :</p>
  
  <pre><code>&lt;table class="table table-striped table-hover table-bordered"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Prénom&lt;input type="text" ng-model="search.firstname" placeholder="Recherche par prénom" ng-change="onChange()" autocomplete="off"&gt;&lt;/th&gt;
      &lt;th&gt;Nom&lt;input type="text" ng-model="search.lastname" placeholder="Recherche par nom" ng-change="onChange()" autocomplete="off"&gt;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr ng-repeat="contact in contacts | filter:search | limitTo:limit"&gt;
      &lt;td&gt;{{contact.firstname}}&lt;/td&gt;
      &lt;td&gt;{{contact.lastname}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/uFzDI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uFzDI.png" alt="Contacts array"></a><br>
  <sub>(source: <a href="http://zupimages.net/up/15/43/52mu.png" rel="nofollow noreferrer">zupimages.net</a>)</sub>  </p>