Can I use the !important css keyword with Angularjs ng-style directive?

Question

I'm having an issue with boostrap3 and it's default background: transparent !important; print setting.
I have the need to show a heatmap in my webapp and have these printable.
I'm using an ng-style directive for that to dynamically calculate the needed background-color.
In short, this is the html part

<div class="heatmap" ng-style="scalecolor(10)">lorem ipsum</div>

and this is the controller part

$scope.scalecolor = function(perc) {
        return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) }
    };

However, because bootstrap3 sets all backgrounds to transparent with the !important keyword, I can't print these.

This is the part of bootstrap 3.1.0 css causing the issue with missing background-color:

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

Since the inverse of background: transparent !important; is background: color hex code !important; (see here ) I'm trying to set that using the ng-style, but then the exclamantion mark causes Angularjs to flip when I try this:

 $scope.scalecolor = function(perc) {
    return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc)  !important }
};

or alternatively when I try this in the html template

ng-style="scalecolor(10) !important"

Anyone out there that knows how I can use the !important css keyword with the Angularjs ng-style directive to override the bootstrap3 wildcard?

For those who want to see this with their own eyes, here's a plunker showing the issue

Answer 1

Apparently you can't and it's a known issue but there is some workaround that can be found here:

https://github.com/angular/angular.js/issues/5379

The solution below has been copied from the site just in case the link breaks, or get changed.

You're not able to use the !important directive in the DOM style property in either Chrome nor FF (probably others too). The style attribute gets parsed as CSS, but the HTMLElement.style property doesn't. Unfortunately you're not able to set a property's priority here (in Gecko/Blink/Webkit, at least).

So, there are some workarounds here:

Workaround #1

<ANY data-ng-attr-style="{{ blue && 'background-color: blue!important' || '' }}">
</ANY>

This would be your best way to go in terms of browser-support, because the CSS property priority will get parsed correctly here.

Workaround #2

Alternatively, you can also do the following in javascript:

$scope.$watch(conditionalStyle);

function conditionalStyle() {
  if ($scope.blue) {
    $element[0].style.setProprety('background-color', 'blue', 'important');
  } else {
    $element[0].style.backgroundColor = '';
  }
}

Where $element is a jQuery/jqLite object referencing an HTMLElement.

Note: caveats are not supported in IE < 9 so workaround #1 is probably your best bet for this behavior where you depend on property priority...

Answer 2

Using the tips for @Wawy I updated my code to get it to work.
For anyone landing on this page, for clarification I made an updated Plunker that can be found here

In short, this is now the html part

<div class="heatmap" ng-attr-style="{{ngAttrScaleColor(10)}}">YES, ng-attr-style works !</div>

and this is the controller part

$scope.ngAttrScaleColor = function(perc) {
        return  'background-color: ' + plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) + '!important';
 };