title: Angularjs group data from a field in the records
body: <p>Is there group by like something in angular that can convert this sort of json data grouped under group_header.</p>
  
  <p>outer list to sort data by groups and then inner list data items of that group, i couldn't make sense of this if this data can be grouped?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [  
     {  
        "id":23,
        "name":"Fun Run (Pre-Registration Required)",
        "date":"Wednesday Nov 12",
        "group_header":"Sessions from 7:00 am to 1:45 pm"
     },
     {  
        "id":24,
        "name":"Breakfast",
        "date":"Wednesday Nov 12",
        "group_header":"Sessions from 7:00 am to 1:45 pm"
     },
     {  
        "id":25,
        "name":"Opening Address",
        "date":"Wednesday Nov 12",
        "group_header":"Sessions from 7:00 am to 1:45 pm"
     },
     {  
        "id":25,
        "name":"abc",
        "date":"Wednesday Nov 12",
        "group_header":"Sessions from 1:00 pm to 9:00 pm"
     },
     {  
        "id":26,
        "name":"xyz",
        "date":"Wednesday Nov 12",
        "group_header":"Sessions from 1:00 pm to 9:00 pm"
     },
      {  
        "id":26,
        "name":"xyz",
        "date":"Wednesday Nov 12",
        "group_header":"Sessions from 8:45 am to 2:00 pm" //notice a different header
     },
    {  
        "id":26,
        "name":"xyz",
        "date":"Wednesday Nov 12",
        "group_header":"Sessions from 1:30 pm to 11:00 pm" //another different header
     }
  ]</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;ul&gt;
      &lt;li&gt;Sessions from 7:00 am to 1:45 pm
          &lt;ul&gt;
              &lt;li&gt;Fun Run (Pre-Registration Required)&lt;/li&gt;
              &lt;li&gt;Breakfast&lt;/li&gt;
              &lt;li&gt;Opening Address&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Sessions from 1:00 pm to 9:00 pm
          &lt;ul&gt;
              &lt;li&gt;abc&lt;/li&gt;
              &lt;li&gt;xyz Address&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;another custom header (no pattern to it) - sessions from 10 am to 5 pm 
          &lt;ul&gt;
              &lt;li&gt;abc&lt;/li&gt;
              &lt;li&gt;xyz Address&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>