title: AngularJS + style is not applied to field
body: <p>I am trying to apply a color to a message on an api response.</p>
  <p>example:</p>
  <p>angularJS:</p>
  <pre><code> .then(function (response) {
      angular.element(document.getElementById(&quot;msg&quot;)).css('color', '#00662f');
      $scope.Messages = response.data;
      
  </code></pre>
  <p>and my HTML:</p>
  <pre><code>&lt;div id=&quot;msg&quot; ng-repeat=&quot;msg in Messages&quot;&gt;{{msg}}&lt;/div&gt;
  </code></pre>
  <p>but this line:</p>
  <pre><code>angular.element(document.getElementById(&quot;msg&quot;)).css('color', '#00662f');
  </code></pre>
  <p>does not seem to be applied to the color of the message.</p>
  <p>Can you tell what I am doing wrong?</p>
  <p>Thank you for your help.</p>
  <p>Erasmo</p>
  <p><strong>UPDATE</strong> - My Solution</p>
  <p>added a boolean</p>
  <pre><code>$scope.IsColor == true;
  </code></pre>
  <p>Set it to false/true based on the API response:</p>
  <pre><code>if (response.data.indexOf(&quot;sucessfully added&quot;) !== -1) {
      $scope.Messages = response.data;
      $scope.IsColor = true;
      angular.element(&quot;#msg&quot;).focus()
      return true;
  }
  else {
      $scope.Messages = response.data;
      $scope.IsColor = false;
      angular.element(&quot;#msg&quot;).focus()                           
      return false;
  }
  </code></pre>
  <p>Then in the HTML</p>
  <pre><code>&lt;div id=&quot;msg&quot; ng-repeat=&quot;msg in Messages&quot; ng-class=&quot;$scope.IsColor ? 'text-green' : 'text-red'&quot;&gt;{{msg}}&lt;/div&gt;
  </code></pre>