AngularJS - Apply Style to currency and percentage texts before bind to UI

I have a scenario where i need to highlight currency amount values and percentage values within html text. I went over so many sites to achieve this and finally got achieved this using AngularJS with JavaScript.

What i expected is below:

What Steps i done to achive this below:

1: Create Javascript function to replace currency and percentage matched text to our required style. In this case i have used regular expression

var ReplaceCurrencyText = function (text) {

    var returnText = text.replace(/(\$?(?=\(.*\)|[^()]*$)\(?(\d{1,6}|\d{1,3},\d{3})(\.\d\d?)?\)?\%?)/g, "<span style=’color:green;’>$1</span>");

    return returnText;

};

Here $1 represents RegEx matched 1st group. Each brackets considered as one group, but in this case i used only one group (i.e., (\$?(?=\(.*\)|[^()]*$)\(?(\d{1,6}|\d{1,3},\d{3})(\.\d\d?)?\)?\%?) ).

2: Create angular directive which used to replace currency and percentage text as required

angularApp.directive('displayStyledCurrencyValue', ['$sce', function ($sce) {

    return {

        restrict: 'AE',

        replace: true,

        template:

                   '<div ng-bind-html="getStyledHtml(htmlText)"></div>',

        scope: {

            htmlText: '='

        },

        link: function (scope, element, attrs) {

            scope.getStyledHtml = function (html) {

                return $sce.trustAsHtml(ReplaceCurrencyText(html));

            };

        }

    };

}]);

Here i have used ng-bind-html to render text as html so that html element will not be shown as text and for this i used $sce.trustAsHtml method to return as html string. JavaScript function ReplaceCurrencyText called inside angular directive to get my required format of currency amount and percentage text.

3: Call this angular directive in html page wherever required and th

<display-styled-currency-value html-text="someValueToBind"></display-styled-currency-value>