title: Multiple Optional Parameters with Angular JS ( UI-Router)
body: <p>I have a page which displays products from a JSON REST web service. Not sure if this is the best way, but I am trying to use query parameters on the page to be able to filter based on MinPrice and MaxPrice (other filters would be added later as well) - however, i can't get multiple parameters working.</p>
  
  <p>for example: </p>
  
  <p>MinPrice and MaxPrice are both optional. </p>
  
  <p>When I click MinPrice 30, i get the following URL, which is fine:</p>
  
  <blockquote>
    <p><strong>#/minPriceParam=3</strong> </p>
  </blockquote>
  
  <p>If i then click MaxPrice  60, I would expect</p>
  
  <blockquote>
    <p><strong>#/minPriceParam=30&amp;maxPriceParam=60</strong></p>
  </blockquote>
  
  <p>however what i actually get is </p>
  
  <blockquote>
    <p><strong>#/maxPriceParam=60</strong>
    i.e. it's lost the minPriceParam=30 part.</p>
  </blockquote>
  
  <p>this is the simplified code that i have</p>
  
  <pre><code>&lt;a ui-sref="minPrice({ minPriceParam:30 })"&gt;   MinPrice 30&lt;/a&gt;
  &lt;a ui-sref="maxPrice({ maxPriceParam:60 })"&gt;   MaxPrice 60&lt;/a&gt;
  </code></pre>
  
  <p>JS File</p>
  
  <pre><code>app.config(function ($stateProvider, $urlRouterProvider) {
  
  $stateProvider
  
        .state('minPrice', {
          url: '/?minPriceParam&amp;maxPriceParam'
  
          , controller: function ($scope, $StateParams) 
           {$scope.minimumPrice = $StateParams.min;}
      })
  
          .state('maxPrice', {
          url: '/?minPriceParam&amp;maxPriceParam'
  
          , controller: function ($scope, $StateParams) { $scope.maximumPrice = $StateParams.max; }
      })
  
  
  
  });
  </code></pre>