title: AngularJS - custom filter errors due to undefined arrays and still filters properly?
body: <p>I have an array of objects getting assigned to <code>$scope</code> within a controller, and is being filtered in a series of divs within a partial template:</p>
  
  <pre><code>  &lt;div class="entity-list"&gt;
      &lt;!-- Folders --&gt;
      &lt;div class="entity-listing folder" ng-repeat="child in folders | filterName:nameFilter | entityType:filterType | orderBy:orderProp:orderAscDesc"&gt;
        &lt;!-- Some HTML --&gt;
      &lt;/div&gt;
      &lt;!-- Files --&gt;
      &lt;div class="entity-listing document" ng-repeat="child in documents | filterName:nameFilter | entityType:filterType | orderBy:orderProp:orderAscDesc"&gt;
        &lt;!-- Some HTML --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The filters are displayed in a separate <code>fieldset</code> element:</p>
  
  <pre><code>  &lt;fieldset id="filters"&gt;
      &lt;legend&gt;Filters&lt;/legend&gt;
      &lt;label for="filter-name"&gt;Name Contains:&lt;/label&gt;
      &lt;input id="filter-name" ng-model="nameFilter"&gt;
      &lt;label for="filter-type"&gt;Show:&lt;/label&gt;
      &lt;select id="filter-type" ng-model="filterType"&gt;
        &lt;!-- some options --&gt;
      &lt;/select&gt;
      &lt;label for="sort-field"&gt;Sort By:&lt;/label&gt;
      &lt;select id="sort-field" ng-model="orderProp"&gt;
        &lt;!-- some options --&gt;
      &lt;/select&gt;
      &lt;select ng-model="orderAscDesc"&gt;
        &lt;!-- some options --&gt;
      &lt;/select&gt;
    &lt;/fieldset&gt;
  </code></pre>
  
  <p>I have a module set up with two filters, and pass that module on to my app:</p>
  
  <pre><code>angular.module('widget', ['filters']).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.
        when('/homefolder', {templateUrl: 'widget/partial/entity-list.html', controller: HomeFolderCtrl}).
        when('/folder/:uuid', {templateUrl: 'widget/partial/entity-list.html', controller: FolderCtrl}).
        otherwise({redirectTo: '/homefolder'});
    }]);
  angular.module('filters', []).
    filter('entityType', function() {
      return function(items, type) {
        var returnArray = [];
        for (var i=0,ii=items.length;i&lt;ii;i++) {
          if (type == "both") {
            returnArray.push(items[i]);
          } else if (items[i].type == type) {
            returnArray.push(items[i]);
          }
        }
        return returnArray;
      }
    }).
    filter('filterName', function() {
      return function(items, str) {
        var returnArray = [];
        if (str != '') {
          for (var i=0,ii=items.length;i&lt;ii;i++) {
            if (items[i].name.indexOf(str) !== -1) {
              returnArray.push(items[i]);
            }
          }
        } else {
          returnArray = items;
        }
        return returnArray;
      }
    });
  </code></pre>
  
  <p>I'm concerned that this code works, yet when looking at the error console, I get a bunch of errors saying <code>Cannot read property 'length' of undefined</code> regarding the <code>filterName</code> and <code>entityType</code> filters' for loops.  If I wrap those filter in an if statement to check if <code>items</code> is defined (take for example <code>filterName</code>):</p>
  
  <pre><code>  filter('filterName', function() {
      return function(items, str) {
        var returnArray = [];
        if (items) {
          if (str != '') {
            for (var i=0,ii=items.length;i&lt;ii;i++) {
              if (items[i].name.indexOf(str) !== -1) {
                returnArray.push(items[i]);
              }
            }
          } else {
            returnArray = items;
          }
        }
        return returnArray;
      }
    });
  </code></pre>
  
  <p>It gets rid of the error and works as well.  Why would AngularJS pass in undefined <code>item</code>s to the filters?  Where else could these filters be getting called if they are only explicitly getting called in my two <code>ng-repeat</code>s?</p>