title: Angularjs Error: [filter:notarray] Expected array but received: {} with a filter on an ng-repeat
body: <p>I am attempting to populate an html table using an angular request to an API using the ng-repeat directive. The html page loads first then the request is made to get the data which fills the table when the response is returned.
  When I add a filter to the ng-repeat directive the table is populated and the filter functions, however in my chrome browser console I get the following error:</p>
  
  <blockquote>
    <p>Error: [filter:notarray] Expected array but received: {}
    <a href="http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D" rel="noreferrer">http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D</a>
       at REGEX_STRING_REGEXP (angular.js:68)
       at angular.js:18251
       at Object.fn (app.js:185)
       at Scope.$get.Scope.$digest (angular.js:15683)
       at Scope.$get.Scope.$apply (angular.js:15951)
       at bootstrapApply (angular.js:1633)
       at Object.invoke (angular.js:4450)
       at doBootstrap (angular.js:1631)
       at bootstrap (angular.js:1651)
       at angularInit (angular.js:1545)</p>
  </blockquote>
  
  <p>I have set a sample up on plunker, the error is also displayed in the console here when the sample is run:</p>
  
  <p><a href="http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj" rel="noreferrer">http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj</a>?</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"&gt;&lt;/script&gt;
    &lt;script data-require="angular-route@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"&gt;&lt;/script&gt;
    &lt;script data-require="angular-resource@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="example.js"&gt;&lt;/script&gt;
    &lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body ng-app="inventoryManagerApp"&gt;
    &lt;h3&gt;Sample - Expected array error&lt;/h3&gt; Filter
    &lt;input type="text" id="quoteListFilter" class="form-control" ng-  model="search" /&gt;
    &lt;div ng-controller="QuoteController"&gt;
      &lt;table class="table table-bordered"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th&gt;Specification&lt;/th&gt;
            &lt;th&gt;Quantity&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat="quote in quotes | filter:search"&gt;
            &lt;td&gt;{{quote.SpecificationDetails}}&lt;/td&gt;
            &lt;td&gt;{{quote.Quantity}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>var inventoryManagerApp = angular.module('inventoryManagerApp', [
    'ngResource',
    'quoteControllers'
  ]);
  
  var quoteControllers = angular.module('quoteControllers', []);
  
  quoteControllers.controller("QuoteController", ['$scope', 'filterFilter', 'quoteRepository',
    function($scope, filterFilter, quoteRepository) {
  
       $scope.quotes = quoteRepository.getQuoteList().$promise.then(
              function (result) {
                  $scope.quotes = result;
              },
              function () {
              }
          );
    }
  ]);
  
  inventoryManagerApp.factory('quoteRepository',
    function($resource) {
      return {
        getQuoteList: function() {
          return    $resource('http://drbsample.azurewebsites.net/api/Quotes').query();
        }
      };
    });
  </code></pre>
  
  <p>It seems to be something to do with the data to fill the ng-repeat directive not being immediately available on page load. When I replace the $scope.quotes with the json data on page load instead of requesting data from the API do not get the error.</p>