title: Want to filter rows with multi select drop down in table
body: <p>In Table, I want to filter rows with multi select drop down.</p>
  
  <p>here is <a href="https://plnkr.co/edit/mLS4StdndHm3hQLARBZb?p=preview" rel="nofollow">plunker</a>.</p>
  
  <p>Example: </p>
  
  <p>When I select 2 country and 2 month in drop down then data so accordingly in table.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="datatable-buttons_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"&gt;
                              &lt;!--page size--&gt;
                              &lt;div class="table-search-bar"&gt;
                                  &lt;div class="dt-buttons btn-group"&gt;
                                      PageSize:
                                      &lt;select ng-model="entryLimit" class="form-control"&gt; 
                                          &lt;option&gt;5&lt;/option&gt;
                                          &lt;option&gt;10&lt;/option&gt;
                                          &lt;option&gt;20&lt;/option&gt;
                                          &lt;option&gt;50&lt;/option&gt;
                                          &lt;option&gt;100&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;!--filter--&gt;
                                  &lt;div id="datatable-buttons_filter" class="dataTables_filter"&gt;&lt;label&gt;Filtered:&lt;input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control input-sm" aria-controls="datatable-buttons" /&gt;&lt;/label&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div ng-show="filteredItems &gt; 0"&gt;
                                  &lt;table id="datatable-buttons" class="table table-striped table-bordered"&gt;
                                      &lt;thead&gt;
                                        &lt;th&gt; &lt;input type="checkbox" ng-model="selectRowId" ng-click="selectedAll()"&gt;&lt;/th&gt;
                                     &lt;th&gt;id&lt;/th&gt;
                                      &lt;th&gt;&lt;a ng-click="sort_by('year');"&gt;Year&amp;nbsp;&amp;nbsp;&lt;/a&gt;&lt;/th&gt;
                                      &lt;th&gt;&lt;a ng-click="sort_by('month');"&gt;Month&amp;nbsp;&lt;/a&gt;&lt;/th&gt;
                                      &lt;th&gt;&lt;a ng-click="sort_by('country');"&gt;Country&amp;nbsp;&lt;/a&gt;&lt;/th&gt;
                                      &lt;th&gt;&lt;a ng-click="sort_by('mobile_operator');"&gt;Mobile Operator&amp;nbsp;&lt;/a&gt;&lt;/th&gt;
                                      &lt;th&gt;&lt;a ng-click="sort_by('service');"&gt;Service&amp;nbsp;&lt;/a&gt;&lt;/th&gt;
                                      &lt;th&gt;Action&lt;/th&gt;         
                                      &lt;/thead&gt;
                                      &lt;tbody ng-init="get_product()"&gt;
                                          &lt;tr ng-repeat="product in filtered = (pagedItems| filter:search | orderBy : predicate :reverse) | limitTo:entryLimit "&gt;
                                              &lt;td&gt; 
                                                  &lt;input type="checkbox" ng-model="selctedIds[product.id]" ng-checked="product.deleted"&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;{{ product.id}}&amp;nbsp;&lt;/td&gt;
                                              &lt;td&gt;{{ product.year}}&amp;nbsp;&lt;/td&gt;
                                              &lt;td&gt;{{ product.month}}&lt;/td&gt;
                                              &lt;td&gt;{{ product.country}}&lt;/td&gt;
                                              &lt;td&gt;{{ product.mobile_operator}}&lt;/td&gt;
                                              &lt;td&gt;{{ product.service}}&lt;/td&gt;
                                              &lt;td&gt;&lt;a href="" ng-click="prod_update(product.id)"&gt;Update&lt;/a&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                                  &lt;!--total result out of--&gt;
                                  &lt;div class="dataTables_info" id="datatable-buttons_info" &gt;Page {{currentPage + 1}} of {{numberOfPages}}   &lt;!--Showing {{ filtered.length}} of {{ totalItems}} entries--&gt;&lt;/div&gt;
                                  &lt;!--pagination--&gt;
                                  &lt;div ng-show="filteredItems &gt; 0"&gt; 
                                      &lt;button class="btn" ng-disabled="currentPage &lt;= 0" ng-click="currentPage = currentPage - 1"&gt;&lt;&lt;&lt;/button&gt;
                                      &lt;!--                                            &lt;button class="btn" ng-disabled="currentPage == 0" ng-click="currentPage = 0"&gt;1&lt;/button&gt;
                                                                                  &lt;button class="btn" ng-disabled="currentPage == 1" ng-click="currentPage = 1"&gt;2&lt;/button&gt;....
                                                                                  &lt;button class="btn" ng-disabled="currentPage == numberOfPages - 1" ng-click="currentPage = numberOfPages - 1"&gt;{{numberOfPages - 1}}&lt;/button&gt;
                                                                                  &lt;button class="btn" ng-disabled="currentPage == numberOfPages" ng-click="currentPage = numberOfPages"&gt;{{numberOfPages}}&lt;/button&gt;--&gt;
                                      &lt;button class="btn" ng-disabled="currentPage &gt;= numberOfPages" ng-click="currentPage = currentPage + 1"&gt;&gt;&gt;&lt;/button&gt;
                                  &lt;/div&gt;
  
  
  
                              &lt;/div&gt;
  
  
                              &lt;div ng-show="filteredItems == 0"&gt;
                                  &lt;div class="col-md-12"&gt;
                                      &lt;h4 class="center-margin"&gt;No Role found&lt;/h4&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  </code></pre>
  
  <p>I appreciate every response. Thanks Ahead.</p>