Angular ng-if any child contains
<p>I'm trying to conditionally show and hide columns based on the data returned, if the data set contains any objects meeting conditions.</p>

<p>Here is a sample of the data returned from my search results</p>

<pre><code>[
    {
        "id": "typeahead-241-1091-option-0",
        "label": "Android Home Page",
        "model": {
            "type": "link",
        }
    },
    {
        "id": "typeahead-241-1091-option-1",
        "label": "Google",
        "model": {
            "type": "link",

        }
    },
    {
        "id": "typeahead-241-1091-option-2",
        "label": "Forgotten Google Play Password",
        "model": {
            "type": "kb",

        }
    }
]
</code></pre>

<p>Now I'm presenting the data in columns, based on the type.</p>

<pre><code>&lt;div class="flexitem"&gt;
  &lt;h4&gt;External Links&lt;/h4&gt;
  &lt;div ng-repeat="match in matches" ng-if="match.model.type == 'link'"&gt;{{match.label}}&lt;/div&gt;
&lt;/div&gt;
&lt;div class="flexitem"&gt;
  &lt;h4&gt;Knowledge Base&lt;/h4&gt;
  &lt;div ng-repeat="match in matches" ng-if="match.model.type == 'kb'"&gt;{{match.label}}&lt;/div&gt;
&lt;/div&gt;
&lt;!-- the below has no results. I want it hidden altogether
currently it shows the &lt;h4&gt;Products&lt;/h4&gt; with nothing below it--&gt;
&lt;div class="flexitem"&gt;
  &lt;h4&gt;Products&lt;/h4&gt;
  &lt;div ng-repeat="match in matches" ng-if="match.model.type == 'product'"&gt;{{match.label}}&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>What I need to accomplish is putting conditions on the flexitem divs altogether to only show if there are results for that type. So if there are no results with the type == 'product', then don't even show that div. A ng-if on that row would work, but what will be the best way to cycle through all of the children of match to determine if there is a result? indexOf doesn't work through children arrays.</p>