Filtering angular table results by value selected in dropdown menu
<p>Given a table of JSON data, I need to be able to filter the results based upon the movie genre the user selects from a dropdown menu. I currently have all of the genres from each movie being pulled in, but need to only have each genre available, show up once. </p>

<p>Here's a sample of the JSON:</p>

<pre><code>{
Rank: 1,
Duration: "1 hr. 47 min.",
Description: "The Friedmans are a seemingly typical, upper-middle-class Jewish family whose world is instantly transformed when the father and his youngest son are arrested and charged with shocking and horrible crimes. Caught up in hysteria and with their community in an uproar, the family undergoes a media onslaught. The film inquires not just into the life of a family but into a community, a legal system, and an era.",
Director: "Andrew Jarecki",
Genres: [
"Documentary",
"Special Interest"
],
Actors: [
"Arnold Friedman",
"Elaine Friedman",
"David Friedman",
"Seth Friedman",
"Jesse Friedman",
"Howard Friedman",
"John McDermott",
"Frances Galasso",
"Anthony Sgueglia",
"Detective Frances Ga...",
"Joseph Onorato",
"Judd Maltin",
"Judge Abbey Boklan",
"Ron Georgalis",
"Scott Banks",
"Debbie Nathan",
"Jerry Bernstein",
"Peter Panaro",
"Lloyd Doppman",
"Jack Fallin"
],
Id: 605,
Name: "CAPTURING THE FRIEDMANS (2003)"
}
</code></pre>

<p>Here's the markup:</p>

<pre><code>&lt;body ng-app='myApp' ng-controller='MyController'&gt;
&lt;div class="col-lg-12"&gt;
  &lt;div class="form-inline col-lg-4"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="Name"&gt;Search by movie title&lt;/label&gt;
        &lt;input ng-model="movie" type="text" class="form-control" id="name" placeholder="Title"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="Actor"&gt;Search by actors&lt;/label&gt;
        &lt;input ng-model="actor" type="text" class="form-control" id="actors" placeholder="Actors"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;label for="genres"&gt;Search by genre&lt;/label&gt;
    &lt;select class="form-control" ng-init="cc={Genres: ''}"&gt;
      &lt;option ng-repeat="movies in results" value="{{movies.Genres}}" ng-model="cc.movies"&gt;{{movies.Genres}}&lt;/option&gt;
    &lt;/select&gt;

    &lt;table class="table-striped col-lg-8"&gt;
      &lt;thead&gt;
        &lt;td width="15%"&gt;Name&lt;/td&gt;
        &lt;td width="30%"&gt;Actors&lt;/td&gt;
        &lt;td width="10%"&gt;&lt;/td&gt;
      &lt;/thead&gt;
    &lt;tr ng-repeat="movies in results | filter:Genres"&gt;
          &lt;td&gt;{{movies.Name}}&lt;/td&gt;
          &lt;td&gt;&lt;li ng-repeat="laptop in movies.Actors | filter:actor" &gt;
           &lt;span ng-bind="laptop"&gt;&lt;/span&gt;
           &lt;/li&gt;&lt;/td&gt;
          &lt;td&gt;{{movie.Name}} &lt;a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}"&gt;Book Now!&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
</code></pre>

<p></p>

<p>and the controller:</p>

<pre><code>    app.controller("MyController", ["$scope","$http",
    function($scope, $http) {

             $http.get('test.json').then(function (response){
                  console.log(response);
                $scope.results = response.data;
        });

     }]);
</code></pre>

<p>Here's the current working plunker with dropdown: </p>

<p><a href="https://plnkr.co/edit/fqJt7pqTc9XKgjgDuGjd?p=preview" rel="nofollow">https://plnkr.co/edit/fqJt7pqTc9XKgjgDuGjd?p=preview</a></p>