title: Ionic multiple "select" filter issue
body: <p>In my ionic project, I have 3 different filters which change my wine list items.</p>
  
  <p><a href="https://i.stack.imgur.com/pwPUw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pwPUw.jpg" alt="Filters and Wine List"></a></p>
  
  <p>Every filter works well if I use each one alone.</p>
  
  <p><a href="https://i.stack.imgur.com/sxQcN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sxQcN.jpg" alt="enter image description here"></a><a href="https://i.stack.imgur.com/uNw7a.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uNw7a.jpg" alt="enter image description here"></a></p>
  
  <p>If I use two filters at the same time, list is updated according to last selection of filter.</p>
  
  <p>Example: I select Pinot Noir from Grape Filter;
  <a href="https://i.stack.imgur.com/R1UwU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R1UwU.jpg" alt="enter image description here"></a></p>
  
  <p>And then, I select "Mendoza, Argentina" from Region Filter;
  <a href="https://i.stack.imgur.com/2mehA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2mehA.jpg" alt="enter image description here"></a></p>
  
  <p>But after my last selection, previous one stays.
  I want it to change "All Grape Types" selection after I select region filter.</p>
  
  <p>Here are my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$scope.filteredList = category.children;
  
  $scope.sort = 'price.byBottle';
  $scope.reverse;
  var sortByCategory;
  var items;
  
  var category = $scope.category;
  
  fillGrapes();
  fillCountries();
  
  $scope.selectedGrape = $scope.grapeTypes[0];
  $scope.selectedCountry = $scope.countries[0];
  
  $scope.changeSort = function(value, ascending) {
     $scope.sort = value;
     $scope.reverse = ascending;
  };
  
  $scope.sortingTypes = [{
     id: 0,
     name: 'Sorting'
  }, {
     id: 1,
     name: 'Artan Fiyat'
  }, {
     id: 2,
     name: 'Azalan Fiyat'
  }, {
     id: 3,
     name: 'Eskiden Yeniye'
  }, {
     id: 4,
     name: 'Yeniden Eskiye'
  }];
  
  $scope.getBySortingType = function(type) {
     console.log('selected type', type);
     if (type.id == 0) {
        $scope.clearFilter();
     } else if (type.id == 1) {
        $scope.changeSort('price.byBottle', false);
     } else if (type.id == 2) {
        $scope.changeSort('price.byBottle', true);
     } else if (type.id == 3) {
        $scope.changeSort('properties.year', false);
     } else if (type.id == 4) {
        $scope.changeSort('properties.year', true);
     }
  };
  
  $scope.checkGrapeType = function(type) {
  var i = null;
  
    for (i in $scope.grapeTypes) {
      if ($scope.grapeTypes[i].id == type.id) {
        return $scope.grapeTypes[i];
      }
    }
  }
  
  $scope.checkCountry = function(type) {
    var i = null;
    for (i in $scope.countries) {
      if ($scope.countries[i].id == type.id) {
        return $scope.countries[i];
      }
    }
  }
  
  $scope.getByGrapeType = function(grapeType) {
    if (grapeType.id == 0) {
      console.log('case0')
      //reload filteredList
      $scope.filteredList = category.children;
      console.log('reload filteredlist', $scope.filteredList);
  
      $scope.selectedCountry = $scope.countries[0];
      console.log('selectedCountry', $scope.selectedCountry);
    } else {
      console.log('case1');
  
      //reload filteredList
      $scope.filteredList = category.children;
      console.log('reload filteredlist', $scope.filteredList);
  
      //refilter filteredList
      $scope.filteredList = _.filter($scope.filteredList, function(item) {
        return item.properties.grapeType === grapeType.name;
      });
      console.log('refiltered filteredlist', $scope.filteredList);
    }
    $scope.selectedGrape = grapeType;
    console.log('selectedGrape', $scope.selectedGrape);
  };
  $scope.getByCountry = function(type) {
    if (type.id == 0) {
      console.log('case0')
      //reload filteredList
      $scope.filteredList = category.children;
      console.log('reload filteredlist', $scope.filteredList);
   } else {
     console.log('case1');
     //reload filteredList
     $scope.filteredList = category.children;
     console.log('reload filteredlist', $scope.filteredList);
     //refilter filteredList
     $scope.filteredList = _.filter($scope.filteredList, function(item) {
       return item.properties.region === type.name;
     });
     console.log('refiltered filteredlist', $scope.filteredList);
   }
   $scope.selectedCountry = type;
   console.log('selectedCountry', $scope.selectedCountry);
     };
  
     function fillCountries() {
   var countries = _.chain($scope.filteredList).pluck('properties.region').uniq().value(countries.unshift('All Regions');
   $scope.countries = _.map(countries, function(item, index) {
     return {
       id: index,
       name: item
     };
   });
     };
  
    function fillGrapes() {
  var grapeTypes = _.chain($scope.filteredList).pluck('properties.grapeType').uniq().value();
  
  grapeTypes.unshift('All Grape Types');
  $scope.grapeTypes = _.map(grapeTypes, function(item, index) {
    return {
      id: index,
      name: item
    };
  });
  console.log('fillgrapes()', $scope.grapeTypes);
  };
  
          $scope.clearFilter = function() {
              $scope.filteredList = category.children;
              console.log("Filter is Cleared", $scope.filteredList);
          };</code></pre>
  </div>
  </div>
  </p>
  
  <p>And, the HTML part:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="filterBox" style="width:100%; margin-top:1em; padding:0; height:4em;" clickable="false"&gt;
    &lt;div class="row" style="padding:0; margin:0; width:100%;"&gt;
      &lt;div class="col col-20" style="height:4em;"&gt;
          &lt;i class="icon ion-funnel" style="float:left; width:100%; height:4em;"&gt;&lt;/i&gt; 
      &lt;/div&gt;
      &lt;div class="col col-20" style="height:4em;"&gt;
         &lt;select style="width:100%; left:0; right:0; margin:0; padding:0; height:3.7em; border:none; text-align:center;" ng-options="grapeType.name for grapeType in grapeTypes" ng-model="selected" ng-init="selected = checkGrapeType(selectedGrape)" ng-change="getByGrapeType(selected)"&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col col-20" style="height:4em;"&gt;
        &lt;select style="width:100%; left:0; right:0; margin:0; padding:0; height:3.7em; border:none; text-align:center;" ng-model="selectedC" ng-options="country as country.name for country in countries" ng-init="selectedC = checkCountry(selectedCountry)" ng-change="getByCountry(selectedC)"&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col col-20"&gt;
         &lt;select style="width:100%; left:0; right:0; margin:0; padding:0; height:3.7em; border:none; text-align:center;" ng-model="selectedSorting" ng-options="sorting as sorting.name for sorting in sortingTypes" ng-init="selectedSorting = sortingTypes[0]" ng-change="getBySortingType(selectedSorting)"&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col col-20"&gt;
         &lt;button class="button button-outline button-dark" style="float:right;" ng-click="clearFilter()"&gt;
           &lt;i class="icon ion-refresh"&gt;&lt;/i&gt;
         &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>After second selection, I want previous one goes to first selection of filter.
  <a href="https://i.stack.imgur.com/9rifP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9rifP.jpg" alt="enter image description here"></a></p>
  
  <p>How can I fix this issue? </p>