AngularJS, how to Re-Apply Directive when the $scope model get data from an API call?

Question

AngularJS, how to Re-Apply Directive when the $scope model get data from an API call?

This directive is working beautifully for me:

    my1040pr.directive('myCurrency', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            $element.bind('change', function() {
                $element.formatCurrency({
                    roundToDecimalPlace: -2,
                    colorize: true
                });
            });
        }
    };
});

but when I update the Scope model using a $resource call to an API, the model gets populated correctly with the data, but the currency masking that should be applied in the directive on the 'change' event, does not get applied... any help will be appreciated...

_e

angularjs

Answer 1

Instead of directly binding on the change event, you should use $scope.$watch. You should watch the model bound using ngModel.

Your current code doesn't work since the callback is outside the angular event loop and so data bindings do not fire. You should wrap that call to formatCurrency in $scope.$apply to tell angular about the change.