title: ng-repeat not coloring elements properly?
body: <p>I am stumped on why the fields in my data aren't coloring correctly. I used a simple greater than logic to assign an ng-class of either green, or red. I added debug lines to check that inside the function the values are correct, and the bool is correct, but on the main page items are 'randomly' colored incorrectly. Help?</p>
  
  <p><strong>I tried several different things on the values, like parseInt() etc with the same results. As Is, no matter what I put inside the function it displays different colors than expected</strong></p>
  
  <pre><code>            &lt;table&gt;
                  &lt;th&gt;&lt;input class="search" type="text" ng-model="searchKey" placeholder="Character" ng-change="setClickedRow(-1)"&gt;&lt;/th&gt;
                  &lt;th ng-click="setSort('pval1')"&gt;
                      &lt;div ng-app="KIdash" ng-controller="controller"&gt;
                      Total Matches: {{TotalMatchesFunc()}}
                      &lt;/div&gt;
                  &lt;/th&gt;
                  &lt;th ng-click="setSort('pval2')"&gt;Wins&lt;/th&gt;
                  &lt;th ng-click="setSort('pval3')"&gt;Losses&lt;/th&gt;
                  &lt;tbody ng-repeat="ps in PlayerStats | orderBy: sortKey | filter:searchKey"&gt;
                      &lt;tr ng-class="{'main-row-selected': $index == selectedRow,'main-row': $index != selectedRow}" ng-click="setClickedRow($index)"&gt;
                          &lt;td&gt;{{ps.name}}&lt;/td&gt;
                          &lt;td&gt;{{ps.pval1}}&lt;/td&gt;
  
                          &lt;!-- *** THIS IS THE PART THAT ISNT WORKING CORRECTLY *** --&gt;
                          &lt;td ng-class="{'green': GreaterWins({{$index}}),'red': !GreaterWins({{$index}})}"&gt;{{ps.pval2}}&lt;/td&gt;
  
                          &lt;td&gt;{{ps.pval3}}&lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;!-- *** COULD THIS SECOND FUNCTION CALL BE POLLUTING MY RESULTS? *** --&gt;
                      &lt;tr ng-class="{'extra-row-green': GreaterWins({{$index}}),'extra-row-red': !GreaterWins({{$index}})}" ng-show="selectedRow == $index"&gt;
                          &lt;td&gt;Detail: {{ps.detail_p1}}&lt;/td&gt;
                          &lt;td&gt;Detail: {{ps.detail_p2}}&lt;/td&gt;
                          &lt;td&gt;Detail: {{ps.detail_p3}}&lt;/td&gt;
                          &lt;td&gt;Detail: {{ps.detail_p4}}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
  
  $scope.GreaterWins = function(z) {
      console.log( "bool " 
          + Boolean($scope.PlayerStats[z].pval2 &gt; $scope.PlayerStats[z].pval3)
          + "   "
          + $scope.PlayerStats[z].pval2 + "vs" + $scope.PlayerStats[z].pval3);
  
      return Boolean($scope.PlayerStats[z].pval2 &gt; $scope.PlayerStats[z].pval3));
  };
  </code></pre>