title: Angular ng-if any child contains
body: <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>