title: Angular JS live select dropdown search filter
body: <p>I am grabbing some news items from a newsfeed REST API and have implemented a free text instant search.</p>
  
  <p>I am now trying to implement a search from a dropdown list that works with the same data but I can filter by author. How can I use a dropdown the same way I use a free text search as a filter on the <code>ng-repeat</code> so that I can filter the results by author?</p>
  
  <h2>Here is a <a href="http://jsfiddle.net/ADukg/9506/" rel="nofollow noreferrer">JSFiddle</a>.</h2>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>/* Newsfeed API Call */
  var app = angular.module('newsFeed', [])
      .controller('Newsfeed', function($scope, $http) {
          $http.get('https://newsapi.org/v1/articles?source=the-next-web&amp;sortBy=latest&amp;apiKey=6ddf8d3cc8a54cc0abf89ad7d685da54').
          then(function(response) {
              $scope.news = response.data;
              console.log(response.data.articles);
          });
      });
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;br/&gt;
    &lt;form&gt;
      &lt;div class="col-md-6"&gt;
        &lt;h2&gt;Newsfeed&lt;/h2&gt;
        &lt;br/&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="text" class="form-control" ng-model="searchText" name="search-news" id="search-news" placeholder="Search for news"&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;select class="custom-select" ng-controller="Newsfeed"&gt;
            &lt;option selected&gt;Filter by Author&lt;/option&gt;
            &lt;option ng-repeat="n in news.articles | filter:searchAuthor | unique: 'author'" value="1"&gt;{{n.author}}&lt;/option&gt;    
          &lt;/select&gt;
        &lt;/div&gt;        
      &lt;/div&gt;
    &lt;/form&gt;    
  
    &lt;div ng-controller="Newsfeed"&gt;
      &lt;div class="card" style="width: 20rem;" ng-repeat="n in news.articles | filter:searchText | filter:searchAuthor"&gt;
        &lt;img class="card-img-top img-responsive" src="{{n.urlToImage}}" alt="Card image cap"&gt;
        &lt;div class="card-block"&gt;
          &lt;h4 class="card-title"&gt;{{n.title}}&lt;/h4&gt;
          &lt;p class="card-text"&gt; {{n.description | cut:true:100:' ...'}}&lt;/p&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>