title: Filter results in angularjs based on select value
body: <p>This seems like it should be easy but I am new to angular and not grasping this concept very well. I am hoping to run an ng-repeat over a dataset and then be able to filter the results based on a selected option in a select box, using the exact same dataset. </p>
  
  <p>I have created an array of options and assigned them to the variable $scope.OurTeamCategories.</p>
  
  <pre><code>angular.module('app', [])
  .controller('Main', ['$scope', function($scope) {
     $scope.ourTeamCategories = [
          {"id":18,"title":'Management'},
          {"id":19,"title":'Administration'},
          {"id":21,"title":'Designers'},
          {"id":22,"title":'Accounts'},
      ]
  }]);
  </code></pre>
  
  <p>Then in the HTML File I am dynamically create the select box using ng-options and use ng-repeat to create a list of these the categories. This all works fine, but now I want to be able to filter</p>
  
  <pre><code>&lt;div ng-app="app"&gt;
    &lt;div ng-controller="Main"&gt;
      &lt;select name="show-filter"  ng-model="catFilter" ng-options="category.title for category in ourTeamCategories"&gt;
            &lt;option value="{{category.id}}"&gt;&lt;/option&gt;
        &lt;/select&gt;
  
    &lt;li ng-repeat="cat in ourTeamCategories"&gt;
        &lt;h3&gt;{{cat.title}}&lt;/h3&gt;
        &lt;!-- for testing --&gt;
       &lt;b&gt;input: {{catFilter.id}}&lt;/b&gt; - - ID: {{cat.id}}
    &lt;/li&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought I would be able to run a filter in the following way, but I am getting an error. Can anyone tell me what I am doing wrong?</p>
  
  <pre><code>&lt;li ng-repeat="cat in ourTeamCategories | filter {cat.id:catFilter.value}"&gt;
  </code></pre>
  
  <p>I've created a plunker here: <a href="http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview">http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview</a></p>