title: Grouping objects with AngularJS
body: <p>I have a bunch of objects in an array and I am trying to figure out how to group them within an Angular repeater. For example I want to group the fruit items with a parentTag key to the Tag key of a parent. So Fruit has a tag of 1 and Apple has a parent tag with a value of 1, meaning Apple is grouped with Fruit.</p>
  
  <p>so using this array...</p>
  
  <pre><code>[
  {
      "code":"Fruit",
      "tag":1
  },
  {
      "code":"Apple",
      "tag":2,
      "parentTag":1
  },
  {
      "code":"Vegetable",
      "tag":3
  },
  {
      "code":"Meat",
      "tag":4
  },
  {
      "code":"Banana",
      "tag":5,
      "parentTag":1
  },
  {
      "code":"Carrot",
      "tag":6,
      "parentTag":3
  },
  {
      "code":"Chicken",
      "tag":7,
      "parentTag":4
  }
  ]
  </code></pre>
  
  <p>I am trying to group the objects like this...</p>
  
  <p>Fruit</p>
  
  <ul>
  <li>Apple</li>
  <li>Banana</li>
  </ul>
  
  <p>Vegetable</p>
  
  <ul>
  <li>Carrot</li>
  </ul>
  
  <p>Meat</p>
  
  <ul>
  <li>Chicken</li>
  </ul>
  
  <p>So far I have a repeater that only displays the objects...</p>
  
  <pre><code>&lt;div ng-repeat="product in products"&gt;
  {{code}}
  &lt;span ng-if="product.tag != null"&gt;{{product.tag}}&lt;/span&gt;
  &lt;span ng-if="product.parentTag &gt; null"&gt;{{product.parentTag}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I don't know how to use the groupBy in this case. any ideas?</p>