title: How to make filter elements unique by using angular
body: <p> </p>
  
  <pre><code>                &lt;select ng-model="model" id="filter"&gt;
                      &lt;option value="" id="dropdownDefault"&gt;Title&lt;/option&gt;
                      &lt;option ng-repeat="select in selects" value="{{select.title}}" id="dropdown"&gt;{{select.title}}&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;select ng-model="model" id="filter"&gt;
                      &lt;option value="" id="dropdownDefault"&gt;Date&lt;/option&gt;
                      &lt;option ng-repeat="select in selects" value="{{select.schedule}}" id="dropdown"&gt;{{select.schedule}}&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;select ng-model="model" id="filter"&gt;;
                      &lt;option value="" id="dropdownDefault"&gt;Category&lt;/option&gt;
                      &lt;option ng-repeat="select in selects" value="{{select.subcategory}}" id="dropdown"&gt;{{select.subcategory}}&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;select ng-model="model" id="filter"&gt;;
                      &lt;option value="" id="dropdownDefault"&gt;Owner&lt;/option&gt;
                      &lt;option ng-repeat="select in selects" value="{{select.owner}}" id="dropdown"&gt;{{select.owner}}&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;input type="search" id="search" class="light-table-filter" data-table="table-striped" placeholder="Search..."&gt; 
                  &lt;table class="table table-striped" style="text-align:left" id="contentTable"&gt;
                      &lt;thead&gt;
                          &lt;tr id="titel"&gt;
                              &lt;th style="display:none;"&gt;MainCategory&lt;/th&gt;
                              &lt;th&gt;Category&lt;/th&gt;
                              &lt;th&gt;Title&lt;/th&gt;
                              &lt;th&gt;Date &amp; Time&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr ng-repeat="select in selects | filter:model"&gt;
                              &lt;td style ="display:none;"&gt;{{select.maincategory}}&lt;/td&gt;
                              &lt;td&gt;{{select.subcategory}}&lt;/td&gt;
                              &lt;td&gt;&lt;a href= "{{select.link}}"&gt; {{select.title}}&lt;/a&gt; &lt;/td&gt;
                              &lt;td&gt;{{select.schedule}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>This is a part of my html file. The content of the data is uploaded by a JavaScript file:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['infinite-scroll']);myApp.controller('controller', function($scope) {
  $scope.selects = [ 
  {ID: '0',maincategory: 'Entertainment',subcategory: 'Music',title: 'Zac Brown Band',link: 'xyz',schedule: 'Tuesday | 12:25AM ET',},
  {ID: '1',maincategory: 'Sports',subcategory: 'Basketball',title: 'WNBA: Dallas @ Phoenix',link: 'xyz',schedule: 'Saturday | 12:25AM ET',},
  {ID: '2',maincategory: 'Sports',subcategory: 'Basketball',title: 'WNBA: Phoenix @ San Antonio',link: 'xyz',schedule: 'Friday | 12:00AM ET',},];});
  </code></pre>
  
  <p>The category "Basketball" is displayed twice in the dropdown menu. How can I make it unique or distinct?</p>
  
  <p>Thanks in advance!</p>