title: Group an array of objects in AngularJS
body: <p>Based on an array looking like this:</p>
  
  <pre><code>var members = [
    {name: "john", team: 1},
    {name: "kevin", team: 1},
    {name: "rob", team: 2},
    {name: "matt", team: 2},
    {name: "clint", team: 3},
    {name: "will", team: 3}
  ];
  </code></pre>
  
  <p>I need to create an unordered list for each team.</p>
  
  <p>Can it be done directly with ngRepeat and a filter maybe?</p>
  
  <p>Or is it easier to reorganize the array into an array of teams with a list of members?</p>
  
  <pre><code>var teams = [
    {id: 1, members: ["john", "kevin"]},
    {id: 2, members: ["rob", "matt"]},
    {id: 3, members: ["clint", "will"]}
  ]
  </code></pre>
  
  <p>The nested ngRepeat would be easy to implement, but how do I go from the first array to this one in a simple / clever manner?</p>
  
  <p><em>Note: The array doesn't come from the database but from an html table. So it's just a flat list of members.</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function MyController() {
    this.members = [
      {name: "john", team: 1},
      {name: "kevin", team: 1},
      {name: "rob", team: 2},
      {name: "matt", team: 2},
      {name: "clint", team: 3},
      {name: "will", team: 3}
    ];
  }
  
  angular.module('app', []);
  angular.module('app')
      .controller('MyController', MyController);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="app"&gt;
    &lt;div ng-controller="MyController as ctrl"&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="member in ctrl.members"&gt;{{ member.name }} - {{ member.team }}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>