title: Filtering and grouping with angularJS group count
body: <p>Given the following data:</p>
  
  <pre><code>[
  {"Id": 3, "Name":"Image1.jpg", "AssetType":0, "Grouping": {"GroupingId": 4, "Name":"Other"}},
  {"Id": 7, "Name":"Document1.jpg", "AssetType":2, "Grouping": {"GroupingId": 4, "Name":"Other"}},
  {"Id": 8, "Name":"Video1.jpg", "AssetType":1, "Grouping": {"GroupingId": 4, "Name":"Other"}},
  {"Id": 6, "Name":"Image2.jpg", "AssetType":0, "Grouping": {"GroupingId": 1, "Name":"Facebook"}},
  ]
  </code></pre>
  
  <p>I wanted to list separate groups of assets types, so I used the following ng-repeat:</p>
  
  <pre><code>&lt;div class="group" ng-repeat="asset in assets | filterBy : ['AssetType'] : 0  "
      &lt;b&gt;{{ asset.Grouping.Name}}&lt;/b&gt;&lt;br /&gt;
      {{ asset.Name }}
  &lt;/div&gt;
  </code></pre>
  
  <p>This gets me the following:</p>
  
  <pre><code>Other
  Image1.jpg
  Facebook
  Image2.jpg
  </code></pre>
  
  <p>Now, I wanted to group by the grouping name, to test if there was only one group for this asset type.  If there was only one, I was not going to show the grouping name, so I added a group by to the ng-repeat statement:</p>
  
  <pre><code>&lt;div class="group" ng-repeat="(key, value) in assets | filterBy : ['AssetType'] : 0  | groupBy : 'Grouping.Name' "&gt;
      &lt;b&gt;{{ key }}&lt;/b&gt; - {{ numGroups(key) }}&lt;br /&gt;
      &lt;div ng-repeat="asset in value "&gt;
          {{ asset.Name }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when I added a function to get the count of keys for this filtered group, I got something unexpected:</p>
  
  <pre><code>Other - 5
  Image1.jpg
  Facebook - 8
  Image2.jpg
  </code></pre>
  
  <p>numGroups is defined like this:</p>
  
  <pre><code> $scope.numGroups = function (key) {
      return Object.keys(key).length;
  }
  </code></pre>
  
  <p>I was expecting the length of keys to be 2 (Other and Facebook) but instead it looks like it is iterating all the items of the array.  </p>
  
  <p>Is there any way to get the count of group keys after a filter has been applied?</p>
  
  <p><strong>There is a way!</strong></p>
  
  <p>Here's how the solution worked out:</p>
  
  <pre><code>$scope.numGroups = function (map) {
      var count = 0;
      angular.forEach(map, function () { count++; });
      return count;
  }
  </code></pre>
  
  <p>and the Html</p>
  
  <pre><code>&lt;div class="group" ng-repeat="(key, value) in images = (assets | filterBy : ['AssetType'] : 0  | groupBy: 'Grouping.Name')  "&gt;
      &lt;div class="groupName" ng-hide="numGroups(images) == 1"&gt;&lt;b&gt;{{ key }}&lt;/b&gt;&lt;/div&gt;
      &lt;div ng-repeat="asset in value"&gt;
          {{ asset.Name }} - Brand {{ asset.Brand.Name }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>