How do I display the .length of an array with a specific category in an angular application
<p>I have a set of tabs that show the amount of items in each container that the tabs open. You will see that filter below. And I want to show the amount of objects inside <code>filtered.length</code> I suppose. </p>

<p>Here is my Data:</p>

<pre><code>[
{
  "img":"assets/images/gallery/girls-1.jpg",
  "group": "girls",
  "title": "Image 1",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/girls-2.jpg",
  "group": "girls",
  "title": "Image 2",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/girls-3.jpg",
  "group": "girls",
  "title": "Image 3",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-1.jpg",
  "group": "music",
  "title": "Image 4",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-2.jpg",
  "group": "music",
  "title": "Image 5",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-3.jpg",
  "group": "music",
  "title": "Image 6",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-4.jpg",
  "group": "music",
  "title": "Image 7",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/music-5.jpg",
  "group": "music",
  "title": "Image 8",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-1.jpg",
  "group": "nature",
  "title": "Image 9",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-2.jpg",
  "group": "nature",
  "title": "Image 10",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-3.jpg",
  "group": "nature",
  "title": "Image 11",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-4.jpg",
  "group": "nature",
  "title": "Image 12",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-5.jpg",
  "group": "nature",
  "title": "Image 13",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-6.jpg",
  "group": "nature",
  "title": "Image 14",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/nature-7.jpg",
  "group": "nature",
  "title": "Image 15",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/space-1.jpg",
  "group": "space",
  "title": "Image 16",
  "desc": "Description",
  "link":""
},
{
  "img":"assets/images/gallery/space-2.jpg",
  "group": "space",
  "title": "Image 17",
  "desc": "Description",
  "link":""
}
]
</code></pre>

<p>Here is a screnshot of the page. <strong>Focus on that number in each tab</strong>. That numbers shows how many images are in that category and subsequently, that's how many will show up on the right side. But that part is already done. I just want to show those numbers programmatically. </p>

<p><a href="https://i.stack.imgur.com/sS1Kt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sS1Kt.jpg" alt="enter image description here"></a></p>

<p>And here is my Filtered HTML</p>

<pre><code>   &lt;ul ng-init="tab = 1" class="list-group"&gt;
        &lt;li ng-class="{active:panel.isSelected(1)}"&gt;
            &lt;a class="list-group-item" ng-click="panel.selectTab(1); groupFilter = {}"&gt;All
            &lt;span class="badge badge-primary"&gt;{{galleries.length}}&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li ng-class="{active:panel.isSelected(2)}"&gt;
            &lt;a class="list-group-item" ng-click="panel.selectTab(2); groupFilter ={group:'nature'}"&gt;Nature
            &lt;span class="badge badge-success"&gt;&lt;!--The amount of items of group Nature. 7 --&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        ...


  &lt;/ul&gt;
</code></pre>

<p>Thanks in advance guys. Teaching myself Angular.</p>