title: Change color of text in dynamic table AngularJS/JavaScript
body: <p>I am working on a web application in which I maintain a <strong>favorites table</strong>. How can I change color of values in HTML table? For example if for a particular column value is less than 0 then display in red and if value id more than 0, display in green. This is the snippet of my code:</p>
  
  <pre><code>&lt;table class="table table-striped" style="margin-top: 10px;" id="favoritesTable"&gt;
      &lt;tr&gt;
          &lt;th&gt;Symbol&lt;/th&gt;
          &lt;th&gt;Stock Price&lt;/th&gt;
          &lt;th&gt;Change (Change Percent)&lt;/th&gt;
          &lt;th&gt;Volume&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="x in mylist"&gt;
          &lt;td&gt;&lt;a ng-click="changeValue(x[0]);getStockDetails()" style="color: blue; cursor: pointer;" data-slide="prev" href="#myCarousel"&gt;{{x[0]}}&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;{{x[1]}}&lt;/td&gt;
          &lt;td id="changeAndPercent"&gt;{{x[2]}} ({{x[3]}}%)&lt;/td&gt;
          &lt;td&gt;{{x[4]}}&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-default btn-sm" ng-click="removeFromTable(x[0])"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I am storing data in mylist variable in angularJS. I want to check if x[2] is greater than 0 then display it in green color and if it is less than 0 display it in red color.</p>
  
  <p>Things I tried were adding script tag inside table and creating table in JavaScript. When I created table in a JavaScript function then ng-click functions did not work. Please help!</p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT: I have also attached an image of my table --> <a href="https://i.stack.imgur.com/XkIhq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XkIhq.jpg" alt="screenshot"></a></p>