title: AngularJS filter data based on JSON records
body: <p>I have a JSON file and want to print <code>&lt;divs&gt;</code> based upon address of resturants but I want to group them based upon the 'r.Address' field. Like all records with 'Address' Delhi should show first followed by all records of 'Chandigarh' and so on. How can I do this?</p>
  
  <p>Following is some of my code</p>
  
  <pre><code>                    &lt;a href="#" ng-repeat="r in resturant" id="rest-list-f" class="offVal"&gt;
                          &lt;div class="col-md-6 col-centered form-planner-inner"&gt;
                              &lt;span class="form-text"&gt;{{ r.Name }}&lt;/span&gt;&lt;br&gt;
                              &lt;address&gt;&lt;span class="glyphicon glyphicon-map-marker" aria-hidden="true"&gt;&lt;/span&gt; &amp;nbsp;{{ r.Address }}&lt;/address&gt;
                              &lt;img class="img-responsive" src="{{ r.Image }}" alt="{{ r.Name }} Image"&gt;&lt;br&gt;
                              &lt;hr/&gt;
                              &lt;table class="eventActive"&gt;
                                  &lt;caption&gt;&lt;strong&gt;&lt;center&gt;&lt;a href="#"&gt;Click To Read Reviews&lt;/a&gt;&lt;/center&gt;&lt;/strong&gt;&lt;/caption&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;&lt;span class="glyphicon glyphicon-cutlery" aria-hidden="true"&gt;&lt;/span&gt; &amp;nbsp;{{ r.Type }}&lt;/td&gt;
                                      &lt;td&gt;&lt;span class="glyphicon glyphicon-time" aria-hidden="true"&gt;&lt;/span&gt; &amp;nbsp;{{ r.Hours }}&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
  </code></pre>
  
  <p>This is my JSON Code</p>
  
  <pre><code>   {
    "records": [
      {
        "Name": "Sagar Ratna",
        "Image": "./images/sr.jpg",
        "Address": "Mohali",
        "Type": "South Indian",
        "Hours" : "10:00-23:30"
      },
      {
        "Name": "The Night Factory",
        "Image": "./images/nf.jpg",
        "Address": "Chandigarh",
        "Type": "Chinese",
        "Hours" : "24/7"
      },
      {
        "Name": "Whistling Duck",
        "Image": "./images/ed.jpg",
        "Address": "Rajpura",
        "Type": "Chinese",
        "Hours" : "11:30-23:30"
      },
      {
        "Name": "Uncle Jack's",
        "Image": "./images/uj.jpg",
        "Address": "Mohali",
        "Type": "Pizza",
        "Hours" : "10:00-22:30"
      },
      {
        "Name": "Corner Griller",
        "Image": "./images/cg.jpg",
        "Address": "Rajpura",
        "Type": "North Indian",
        "Hours" : "11:00-23:30"
      },    {
        "Name": "Starbucks",
        "Image": "./images/st.jpg",
        "Address": "Delhi",
        "Type": "Coffee",
        "Hours" : "24/7"
      }
    ]
  }
  </code></pre>
  
  <p>This the output I want like :</p>
  
  <pre><code>&lt;div&gt; Restaurant Name, Address: Delhi &lt;/div&gt;
  &lt;div&gt; Restaurant Name, Address: Mohali &lt;/div&gt;
  &lt;div&gt; Restaurant Name, Address: Mohali &lt;/div&gt;
  &lt;div&gt; Restaurant Name, Address: Rajpura &lt;/div&gt;  
  &lt;div&gt; Restaurant Name, Address: Rajpura &lt;/div&gt;
  &lt;div&gt; Restaurant Name, Address: Rajpura &lt;/div&gt;
  &lt;div&gt; Restaurant Name, Address: Chandigarh &lt;/div&gt;
  </code></pre>