title: Updating a CSS style globally with variable in scope
body: <p>I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.</p>
  
  <p>So currently, on all elements that require the theme color, I have given them the css class <code>has-main-color</code>.</p>
  
  <p>In the controller, I get their desired color from the web service and set it to the scope as <code>$scope.mainColor = color;</code>.</p>
  
  <p>All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the <code>has-main-color</code> class.</p>
  
  <p>Currently, I'm trying the following:</p>
  
  <pre><code>&lt;style&gt;
      .has-main-color {
          color: {{mainColor}}
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>As you could probably guess, this doesn't work so well.</p>
  
  <p>So what would be the best approach to solve this problem using AngularJS?</p>