title: How do I set a class based on a child element's state with Angular?
body: <p>I am trying to display a results 'table' (built with DIVs as it happens) using Angular. Data looks somethingof it  like this:</p>
  
  <pre><code>[['sydney','hotel','2','5','1'],
  ['sydney','bar','6','5','2'],
  ['sydney','stand','2','7','3'],
  ['melbourne','hotel','2','5','1'],
  ['melbourne','bar','8','0','1']]
  </code></pre>
  
  <p>What I want firstly is to suppress the repeating city name so that the first row says 'sydney' at the start but the second row and third row don't. Then the fourth says 'melbourne' and the fifth says nothing.</p>
  
  <p>I've achieved this using markup like this:</p>
  
  <pre><code>&lt;div class="row-container"
      ng-repeat="row in resultsRows" 
      &lt;div 
          ng-repeat="cell in row track by $index" 
          ng-bind="showValue( cell )"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The showValue() function in the controller looks like this:</p>
  
  <pre><code>$scope.currentCityName = '';    
  function showValue( val ) {
          var outValue = '';
          if (this.$index === 0) {
              if (val === $scope.currentCityName) {
                  outValue = '';
              } else {
                  $scope.currentCityName = val;
                  outValue = val;
              }
          } else {
              outValue = val;
          }
          return outValue;
      }
  </code></pre>
  
  <p>Maybe that's a bit clunky but it works and I get:</p>
  
  <pre><code>sydney    hotel  2  5  1
            bar    6  5  2
            stand  2  7  3
  melbourne hotel  2  5  1
            bar    8  0  1
  </code></pre>
  
  <p>Now, though, I want rows that have the city name in them to have a different background colour. </p>
  
  <p>What I think I want is for any 'TR' DIV (I call it that because it contains the left-floated 'TD' DIVs with the data points in them) to check if its first child DIV is not empty (because it has the city name in it) and, if so, to colour its background.</p>
  
  <p>My question is: how do I do that with Angular? Or am I missing another trick..?</p>
  
  <p>How do I get an item in an ng-repeat loop to interrogate a child element?</p>