title: Angularjs apply price range filter with button
body: <p>I am new into angularjs. I have the price range based on nouislider and couple of products with different prices. I would like to filter them, but only after click on the filter button. 
  This is my "slide filter" in html:</p>
  
  <pre><code>            &lt;section class="filter-section"&gt;
                  &lt;h3&gt;Price&lt;/h3&gt;
                &lt;form method="get" name="price-filters"&gt;
                  &lt;span ng-click="price_slider.start = [180, 1400]" class="clear" id="clearPrice" &gt;Clear&lt;/span&gt;
                  &lt;div class="price-slider"&gt;
                      &lt;div id="price-range" ya-no-ui-slider="price_slider"&gt;&lt;/div&gt;
                    &lt;div class="values group"&gt;
                      &lt;!--data-min-val represent minimal price and data-max-val maximum price respectively in pricing slider range; value="" - default values--&gt;
                      &lt;input class="form-control" name="minVal" id="minVal" type="text" ng-model="price_slider.start[0]"&gt;
                      &lt;span class="labels"&gt;€ - &lt;/span&gt;
                      &lt;input class="form-control" name="maxVal" id="maxVal" type="text" ng-model="price_slider.start[1]"&gt;
                      &lt;span class="labels"&gt;€&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;input class="btn btn-primary btn-sm" type="submit" ng-click="priceFiltering('filter')" value="Filter"&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/section&gt;
  </code></pre>
  
  <p>Here is my price slider in controller:</p>
  
  <pre><code>$scope.price_slider = {
          start: [180, 1400],
          connect: true,
          step: 1,
          range: {
              min: 10,
              max: 2500
          }
      }; 
  </code></pre>
  
  <p>And here is my filter in controller:</p>
  
  <pre><code>    $scope.priceFiltering = function(command){
      if (command === "filter"){
          $scope.pricefilter = function (product) {
              if ((product.price &lt;= $scope.price_slider.start[1])&amp;&amp;(product.price &gt;= $scope.price_slider.start[0])){
                  return product;
              }
          };
          command = "nofilter";
      }   
  }
  </code></pre>
  
  <p>I am applying the filter with ng-repeat like this:</p>
  
  <pre><code>&lt;div ng-repeat="product in products | filter:pricefilter  | orderBy:propertyName:reverse"&gt;...
  &lt;/div&gt;
  </code></pre>
  
  <p>Right now at the beginning it works as i want. The user choose on price slider values (eg. min 800€ and max 1000€) and when he clicks on filter button it returns the correct products. However when he moves the slider afterwords filter is still active and returns products immediately. I would like to filter the products always only when the filter button is clicked. I think I am close but I just cannot get it work as I want. Can anyone help me?</p>