title: Angular 1.7 Filtering Table based off select box
body: <p><a href="http://jsfiddle.net/ADukg/13415/" rel="nofollow noreferrer">http://jsfiddle.net/ADukg/13415/</a></p>
  
  <p>I have an object called 'orders' that contains a list of foods, filterable by type with the select box below. The select box contains the filter for the food category of the orders. I want to be able to filter out a table using angular using this select box. </p>
  
  <pre><code>$scope.orders = { 
                "order1": {food_name: "apple", type: 1},
                "order2": {food_name: "banana", type: 1},
                "order3": {food_name: "carrot", type: 2},
                "order4": {food_name: "cereal", type: 3},
                "order5": {food_name: "wheat", type: 3}
                }
  
  $scope.foodCategories = [{id:0,name:"All"}, {id:1,name:"Fruit"},{id:2,name:"Vegatable"}, {id:3,name:"Grains"}];
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app = "myApp" ng-controller="foodCntrl"&gt;
   Select Food Type:
   &lt;select 
          class="form-control" ng-model="foodCategories" ng-options="type as type.name for type in foodCategories"&gt;
   &lt;/select&gt;
  
    &lt;table class="table"&gt;
         &lt;thead&gt;
          &lt;tr&gt;
           &lt;th&gt;Food Name&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
         &lt;tr ng-repeat="f in orders | filter:foodCategories.id"&gt;
               &lt;td&gt;{{f.food_name}}&lt;/td&gt;
         &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>I am getting the angular console error: 
  <strong>Error: filter:notarray
  Not an array</strong> when using filter:foodCategories on the table ng-repeat.</p>
  
  <p>How can I fix this?</p>