Angular JS - Number filter - Change colour when negative

I am applying a number filter to the result of a function:

<tr class="text-center">
    <th class="text-center">{{monthCategoryTotalPredict = getCategoryMonthTotal(costDirection, month, category, "predict")  | currency:currencySymbol}}</th>
    <th class="text-center">{{monthCategoryTotalActual  = getCategoryMonthTotal(costDirection, month, category, "actual")   | currency:currencySymbol}}</th>
    <th class="text-center">{{calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual)  | currency:currencySymbol}}</th>
</tr>

Negative numbers are represented like this by default: (£230.00).

My aim is to make them also change colour to red. How can I do this in Angular JS? Can this be part of the filter? Can I override the filter to modify it's default behaviour slightly without a complete rewrite?

Thanks in advance!