Angular.js formatter not being fired on modelValue change

Question

http://plnkr.co/edit/HN1PBGRsK6xqT9pwXcKY?p=preview it should be quite self explaining

ctrl.$formatters runs when I initially set the model value, but don't after I update it.

According to this Have $formatters be called when view is first populated? it should fire everytime model value is changed, so what's wrong? Thanks.

Answer 1

Use the natural model setter, scope[attrs.ngModel] instead of setviewvalue.

app.directive('format', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
    element.unbind('input').unbind('keydown').unbind('change');
        element.bind('blur', function() {
            if (element.val()) {
                scope.$apply(function() {
                    scope[attrs.ngModel] = element.val();
                });         
            }
        });

        ctrl.$formatters.unshift(function(modelValue) {
            if (modelValue) {
                var formatted = $filter('currency')(modelValue);
                return formatted;
            }
        });
    }
}
});

You will also need a parser for this to work correctly.