ng-class not working inside a directive

Question

I tried creating a directive:

app.directive('barsCurrent', function () {
    return {
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
            attrs.$observe('value', function (newValue) {
                // value attribute has changed, re-render              
                var value = Number(newValue);
                var dval = value / 3;
                element.children().remove();
                while (dval > 0) {
                    element.append('<div id="bar" ng-class="{true: 'greater',false: 'less'}[charge.current >= charge.max]" style="float:left; color:green; height: 17px;margin-top:7px;background-color:green;">.</div>')
                    dval--;
                }
            });
        }
    };
});

and ng-class is not working. Any thoughts why it is not working or can you suggest another way to do it?

This is my controller:

app.controller("controller", function ($scope) {
    $scope.chargeability = [{ date: '15-Sep-13', max: 100, current: 100 },
    { date: '30-Sep-13', max: 60, current: 50 },
    { date: '15-Oct-13', max: 80, current: 20 }];
    $scope.ytd = 122;
});

and here is the html body:

<div ng-repeat="charge in chargeability">
 <bars-current style="z-index:999999;" value="{{charge.current}}">current:{{charge.current}}</bars-current>
<div style="clear:both;height:6px;"></div>

I would like to accomplish this style in the ng-class:

<style>
.greater {
    color:#D7E3BF;
    background-color:#D7E3BF;
}
.less {
    color:#E5B9B5;
    background-color:#E5B9B5;
}
</style>

Answer 1

You will need to use the $compile service, since you are working in the link function inside the directive.

Once you hit the link function, the DOM is already built, and angular will not be aware of any changes you make to the DOM inside the link function, unless you run the changes through the $compile service.

Try this (untested):

app.directive('barsCurrent', function ($compile) {
    return {
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
            attrs.$observe('value', function (newValue) {
                // value attribute has changed, re-render              
                var value = Number(newValue);
                var dval = value / 3;
                element.children().remove();
                while (dval > 0) {
                    var newDom = '<div id="bar" ng-class="{true: \'greater\',false: \'less\'}[charge.current >= charge.max]" style="float:left; color:green; height: 17px;margin-top:7px;background-color:green;">.</div>'
                    element.append($compile(newDom)(scope));
                    dval--;
                }
            });
        }
    };
});

Here's an example jsfiddle that uses $compile inside a directive link function:

Fiddle

UPDATE:

Here is a jsfiddle with a few changes that may provide the results you want:

Fiddle

UPDATE 2:

I updated the fiddle again. It should now be the result you want. Same fiddle, just updated. (Use link above).