title: AngularJS Group By object property
body: <p>I have this object:</p>
  
  <pre><code>  $scope.items = [{ 
      "category": { "code": "10", "description": "Movies" },
          "item": {"code": "421", "description": "Noriko's Dinner Table" }
                    },{ 
      "category": { "code": "10", "description": "Movies" },
          "item": {"code": "511", "description": "Avatar" }
                    },{ 
      "category": { "code": "45", "description": "Books" },
          "item": {"code": "93", "description": "Divergent" }
                    },{ 
      "category": { "code": "45", "description": "Books" },
          "item": {"code": "72", "description": "Sense and Sensibility" }
                    },{ 
      "category": { "code": "33", "description": "TV Shows" },
          "item": {"code": "11", "description": "The Walking Dead" }
                    },{ 
      "category": { "code": "33", "description": "TV Shows" },
          "item": {"code": "60", "description": "The Bates Motel" }
                    }];
  </code></pre>
  
  <p>and I am trying to group them so that the list can be neatly organized and viewable. Like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ALWmH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ALWmH.png" alt="enter image description here"></a></p>
  
  <p>But as you can see, the category description appears on every item. What do I do?</p>
  
  <pre><code>  &lt;ul&gt;
      &lt;li ng-repeat="item in items track by $id(item)"&gt;&lt;div&gt;{{item.category.description}}&lt;/div&gt;{{item.item.description}}&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>LIVE DEMO: <a href="http://plnkr.co/edit/mjek9xPo3ihBTiwW6U0V?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/mjek9xPo3ihBTiwW6U0V?p=preview</a></p>