title: sorting products based on price in angular js
body: <pre><code>[{
          "title":"Men's Polo",
          "sku":"menspolo",
          "img":"images/mens/mens polo front.png",
          "oldprice":675,
          "newprice":650,
          "latest":"latest",
          "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"
  
      },
      {
          "title":"Women's Full Sleeve",
          "sku":"womensfullsleeve",
          "img":"images/womens/women polo front.png",
          "oldprice":666,
          "newprice":633,
          "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"
  
      },
      {
          "title":"Women's Sleeve less",
          "sku":"menssleeveless",
          "img":"images/womens/womens hoodie front.png",
          "oldprice":599,
          "newprice":499,
          "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"
  
      },
      {
          "title":"Women's Hoodie",
          "sku":"menshoodie",
          "img":"images/womens/womens t-shirts-front.png",
          "oldprice":680,
          "newprice":650,
          "featured":"featured",
          "desc":"Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit Lorem Ipsum Dolor Sit Amit"
  
      }
  ]
  </code></pre>
  
  <p>this is my product.json file, I am developing a store app and i wanted to set price filter in the page, </p>
  
  <pre><code>&lt;form class="form-group form-inline"&gt;
      &lt;input type="radio" name="filter" class="form-control"  ng-model="priceFilter" checked&gt;&amp;nbsp
      &lt;label class="control-label"&gt;Low to High&lt;/label&gt;&amp;nbsp&amp;nbsp
      &lt;input type="radio" name="filter" class="form-control" value="reverse"  ng-model="priceFilter"&gt;&amp;nbsp
      &lt;label class="control-label"&gt;High to Low&lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and the code above is my html code for filter's</p>
  
  <pre><code>&lt;div class="ProductStore" ng-controller="ProductController"&gt;
              &lt;div class="col-sm-4" ng-repeat="product in ProductList | filter:newprice | orderBy:newprice:priceFilter"&gt;
              &lt;a href="#/details/{{ProductList.indexOf(product)}}" class="pdt-anchor"&gt;
              &lt;div class="panel panel-primary" &gt;
                  &lt;div class="panel-body"&gt;
                      &lt;img ng-src="{{product.img}}" width="100%" height="100%"&gt;
                      &lt;h4 class="pdt-title"&gt;&lt;center&gt;{{product.title}}&lt;/center&gt;&lt;/h4&gt;&lt;/a&gt;
                      &lt;center&gt;&lt;p class="price"&gt;&lt;span class="old"&gt;Rs.{{product.oldprice}}&lt;/span&gt;&lt;span class="new"&gt;Rs.{{product.newprice}}&lt;/span&gt;&lt;/p&gt;&lt;/center&gt;
                      &lt;button class="btn btn-block btn-primary"&gt;Buy Now&lt;/button&gt;
                      &lt;button class="btn btn-block btn-warning"&gt;Add to cart&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>this is the html code where the products are repeated,</p>
  
  <p>what i want to do is when i click the "low to high" radio button, i want the products to be arranged in low to high price range, and when i click the "high to low" radio button, i want the products to be listed in high to low price range. how can i accomplish this task ?</p>