title: Angular filter with multiple dropdown
body: <p>I am trying to filter with multiple dropdowns.
  For example, when narrowing down by two numbers of value and num, there is no corresponding data when searching with "value = 1, num = 5", but data of "id = '000'" is displayed It will result.
  Where should I fix it?</p>
  
  <p>plunker:<a href="http://plnkr.co/edit/IBRDuHYtSCUFV1xNxjh4?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/IBRDuHYtSCUFV1xNxjh4?p=preview</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
  &lt;div&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;span&gt;value&lt;/span&gt;
              &lt;select class="form-control" ng-model="value_1"&gt;
                  &lt;option ng-repeat="value in product_value" value="{{value}}"&gt;{{value}}&lt;/option&gt;
              &lt;/select&gt;
              &lt;span&gt;num&lt;/span&gt;
              &lt;select class="form-control" ng-model="num_1"&gt;
                  &lt;option ng-repeat="num in product_num" value="{{num}}"&gt;{{num}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;span&gt;value&lt;/span&gt;
              &lt;select class="form-control" ng-model="value_2"&gt;
                  &lt;option ng-repeat="value in product_value" value="{{value}}"&gt;{{value}}&lt;/option&gt;
              &lt;/select&gt;
              &lt;span&gt;num&lt;/span&gt;
              &lt;select class="form-control" ng-model="num_2"&gt;
                  &lt;option ng-repeat="num in product_num" value="{{num}}"&gt;{{num}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;
              id
            &lt;/th&gt;
            &lt;th&gt;
              name
            &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat="products in products | filter:{main:{value:value_1}} | filter:{main:{num:num_1}} |
           filter:{main:{value:value_2}} | filter:{main:{num:num_2}}"&gt;
            &lt;td&gt;{{products.id}}&lt;/td&gt;
            &lt;td&gt;{{products.name}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module('TestMode', []);
  
  app.controller('MainCtrl', function($scope, $filter) {
    $scope.product_value = ["1", "2", "3", "4", "5"];
    $scope.product_num = ["1", "2", "3", "4", "5"];
    $scope.products = [
        {
          id: "000",
          name:'A',
          main:[
              {
                value: "1",
                num: "1"
              },{
                value: "1",
                num: "2"
              },{
                value: "1",
                num: "3"
              },{
                value: "2",
                num: "4"
              },{
                value: "2",
                num: "5"
              }
          ]
        },{
          id: "001",
          name:'B',
          main:[
              {
                value: "5",
                num: "5"
              },{
                value: "5",
                num: "4"
              },{
                value: "5",
                num: "3"
              },{
                value: "4",
                num: "2"
              },{
                value: "4",
                num: "1"
              }
          ]
        }
      ];
  
  });
  </code></pre>