Filter results in angularjs based on select value

Question

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.

I have created an array of options and assigned them to the variable $scope.OurTeamCategories.

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'},
    ]
}]);

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

<div ng-app="app">
  <div ng-controller="Main">
    <select name="show-filter"  ng-model="catFilter" ng-options="category.title for category in ourTeamCategories">
          <option value="{{category.id}}"></option>
      </select>

  <li ng-repeat="cat in ourTeamCategories">
      <h3>{{cat.title}}</h3>
      <!-- for testing -->
     <b>input: {{catFilter.id}}</b> - - ID: {{cat.id}}
  </li>
   </div>
</div>

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?

<li ng-repeat="cat in ourTeamCategories | filter {cat.id:catFilter.value}">

I've created a plunker here: http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

Answer 1

You need to mention direct id in your filer like id that will look up through ourTeamCategories id & for more accurate result do add true at the end will ensure the exact matching rather than contains & also missed colon :

<li ng-repeat="cat in ourTeamCategories | filter : {id: catFilter.id}: true">

Update

You are mixing up two approaches at the same time like ng-options with ng-repeat. I think you should stick with ng-options, so in your current ng-option which is setting title value in your ng-model

<select name="show-filter" ng-model="catFilter" 
   ng-options="category as category.title for category in ourTeamCategories">
</select>

Forked Plunkr here

Answer 2

You need a colon after filter. Try this:

filter: {cat.id:catFilter.value}