title: Can I use the !important css keyword with Angularjs ng-style directive?
body: <p>I'm having an issue with <strong>boostrap3</strong> and it's <strong>default background: transparent !important;</strong> print setting. <br>
  I have the need to show a heatmap in my webapp and have these printable.<br>
  I'm using an ng-style directive for that to dynamically calculate the needed background-color.<br>
  In short, this is the html part</p>
  
  <pre><code>&lt;div class="heatmap" ng-style="scalecolor(10)"&gt;lorem ipsum&lt;/div&gt;
  </code></pre>
  
  <p>and this is the controller part</p>
  
  <pre><code>$scope.scalecolor = function(perc) {
          return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) }
      };
  </code></pre>
  
  <p>However, because bootstrap3 sets all backgrounds to transparent with the <strong>!important</strong> keyword, I can't print these.</p>
  
  <p>This is the part of bootstrap 3.1.0 css causing the issue with missing background-color: </p>
  
  <pre><code>@media print {
    * {
      color: #000 !important;
      text-shadow: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }
  }
  </code></pre>
  
  <p>Since the inverse of background: transparent !important; is  background: color hex code !important; 
  (see <a href="https://stackoverflow.com/questions/20534548/override-background-transparent-important-in-twitter-bootstrap-css">here</a> )
  I'm trying to set that using the ng-style, but then <strong>the exclamantion mark causes Angularjs to flip</strong> when I try this:</p>
  
  <pre><code> $scope.scalecolor = function(perc) {
      return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc)  !important }
  };
  </code></pre>
  
  <p>or alternatively when I try this in the html template</p>
  
  <pre><code>ng-style="scalecolor(10) !important"
  </code></pre>
  
  <p><strong><em>Anyone out there that knows how I can use the !important css keyword with the Angularjs ng-style directive to override the bootstrap3 wildcard?</em></strong>
  <br><br>
  For those who want to see this with their own eyes,  <a href="http://plnkr.co/edit/Q1M5dwP5mkT16gYkWwJM?p=preview" rel="nofollow noreferrer">here's</a> a plunker showing the issue</p>