AngularJS template inside directive. Change the Style?

Question

The css inside the directive does not compile and leads to single color green itself. I want to have different colors for different values for the value identifier and the css color should change accordingly but it always subsides to the last color for all the thermometer widget. Please help.

angular.module('directives').directive('thermometer', function(){
    return {
        restrict: 'AE'
        , replace: true
        , transclude:true
        ,scope : {
            value : "=",
            maxValue : "=" ,
            text:"@",
            percent:"="
            }
        ,template:  function(element, attrs) {
            var html = '<div style="float:left;margin-left:40px"><style> .donation-meter {margin-right:auto;margin-left:auto; width: 80px; } .donation-meter .glass { background: #e5e5e5; border-radius: 100px 100px 0 0; display: block; height: 100px; margin: 0 35px 10px; padding: 5px; position: relative; width: 20px; } .donation-meter .amount { background:{{color}}; border-radius: 100px; display: block; width: 20px; position: absolute; bottom: 5px; } .donation-meter strong { display: block; text-align: center; } .donation-meter .goal { font-size: 20px; } .donation-meter .total { font-size: 16px; position: absolute; right: 35px; } .bulb { background: #e5e5e5; border-radius: 100px; display: block; height: 50px; margin: 0 35px 10px; padding: 5px; position: relative; top: -20px; right: 15px; width: 50px; } .bulb .red-circle { background: {{color}}; border-radius: 100px; display: block; height: 50px; width: 50px; } .bulb .filler { background: {{color}}; border-radius: 100px 100px 0 0; display: block; height: 30px; width: 20px; position: relative; top: -65px; right: -15px; z-index: 30; } </style>';
            html += '<div class="donation-meter"> <b>{{text}}</b>';
            html +=   '<b class="goal">{{maxValue }}</b> <span class="glass"> <b class="total" style="bottom:{{(value/maxValue)*100}}%">{{value}}';
            html+= '</b> <span class="amount" style="height:{{(value/maxValue)*100}}%"></span> </span> <div class="bulb"> <span class="red-circle"></span> <span class="filler"> <span></span> </span> </div> </div></div>';

            return html;

        }
        ,link:function(scope){

            scope.$watch('value',function(newValue){
                console.log("--------------------------");
                console.log();
                if(newValue==75){
                    scope.color="blue";
                }
                if(newValue==76){
                    scope.color="green";
                }
            });
        }

    }
});

The color always subsides to whatever is the last value. Rest of the time it works fine. Please help.

Answer 1

Instead of putting the color on the class .amount put it in the style of the element that has the class .amount:

html+= '</b> <span class="amount" ng-style="{height:(value/maxValue)*100 + '%', background: color}"></span> ...