title: Angular Ng-If Ng-Style not changing the table font colour
body: <p>I have the following code which is an ionic list which populates the data retrieved. Im trying to colour code it into different colours based on the Status reponse.</p>
  
  <pre><code>&lt;ion-list&gt;
    &lt;ion-item ng-repeat="test in tests" class ="item-text-wrap" style="height:40%"&gt;
  
      &lt;a href="#/tab/test/test-detail/{{test.ID}}"&gt;
      &lt;div style="width:80%; float:left;"&gt;
  
      &lt;table&gt;
      &lt;span ng-if="test.Status == 'Cleared'" ng-style="color:green"&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;strong&gt;Remark: &lt;/strong&gt;&lt;/td&gt;
          &lt;td style="padding:3px"&gt;{{test.Remark}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Status:&lt;/strong&gt;&lt;/td&gt;
          &lt;td style="padding:3px"&gt;{{test.Status}}&lt;/td&gt;
      &lt;/tr&gt;
          &lt;/span&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>But the colour of the table data still does not change. What could be the problem? Am i using the ng-if and ng-style wrongly? Thanks!</p>
  
  <p>Update 1: Using the insights provided by @SSH, i updated my controller with the following codes:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;ion-list&gt;
    &lt;ion-item ng-repeat="test in tests" class ="item-text-wrap" style="height:40%"&gt;
  
      &lt;a href="#/tab/test/test-detail/{{test.ID}}"&gt;
      &lt;div style="width:80%; float:left;"&gt;
  
      &lt;table&gt;
      &lt;span ng-style="calculateStyle()"&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;strong&gt;Remark: &lt;/strong&gt;&lt;/td&gt;
          &lt;td style="padding:3px"&gt;{{test.Remark}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Status:&lt;/strong&gt;&lt;/td&gt;
          &lt;td style="padding:3px"&gt;{{test.Status}}&lt;/td&gt;
      &lt;/tr&gt;
          &lt;/span&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code> $scope.calculateStyle = function() {
        var style={}
        console.log('test3: '+$scope.tests.Status);
        console.log('test6: '+$scope.Status);
        if ($scope.Status == 'Cleared') {
        style.color='green';
        console.log('Viola');
      }
      else{
        console.log('GG');
      }
        return style;
    }
  })
  </code></pre>
  
  <p>But the result returned in the controllers are still null/undefined. test3 and test6 returned me 'undefined' while the If statement returned me 'GG'. What could be the problem? Thanks!</p>
  
  <p><strong>Update 2: Using SSH answers, i modified to the following:</strong></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;span ng-style="calculateStyle(test)"&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>$scope.calculateStyle = function(test) {
      var style={}
      if (test.Status == 'Cleared') style.color='green';
      return style;
  }
  </code></pre>
  
  <p>But the test variable at the controller is still undefined. Using $scope.test doesn't work too. What could be the problem?</p>