AngularJS, как заставить ввод повторно отображаться при размытии

У меня есть специальный код проверки, который включает в себя $formatter. (Я храню валюту в фунтах за правильность, но показываю в pounds.pence.)

Если пользователь вводит "10" во вход (который является допустимым значением), вход остается отображающим "10" после перехода в следующее поле.

Я хотел бы, чтобы он отображал 10,00 для согласованности.

Если модель изменила значение до 1000, тогда форматировщик отобразил бы поле "10.00".

Я хотел бы, чтобы форматировщик работал на field.blur() (пока вход действителен).

Моя проблема заключается в том, что если я изменю значение модели с 10 на 10, то, понятно, нет изменений, и поэтому поле не будет повторно отображаться.

код:

var CURRENCY_REGEXP = /^\-?\d+(\.?\d?\d?)?$/;
app.directive('currency', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (CURRENCY_REGEXP.test(viewValue)) {
          // it is valid
          ctrl.$setValidity('currency', true);
          console.log("valid");
          return viewValue * 100;
        } else if (viewValue === '') {
          return 0;
        } else {
          // it is invalid, return undefined (no model update)
          ctrl.$setValidity('currency', false);
          console.log("invalid");
          return undefined;
        }
      });
      ctrl.$formatters.push(function(modelValue) {
         if (modelValue === 0) { // we're using integer pence, so this is safe
             return '';
         }
         return (modelValue / 100).toFixed(2); 
      });
    }
  };
});

P.S. Это не имеет ничего общего с Angular встроенной "валютой".

---

Обновление: я добавил директиву renderOnBlur, как и в ответе Энди. Он вызывается, но вызов метода рендеринга не перерисовывает ввод. то есть "10" остается как "10", а не изменяется на "10.00" по желанию.

(Когда значение модели изменяется в этих полях, они отображаются правильно с помощью двух знаков после запятой.)

На странице, которую Энди упоминает http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController, говорится, что вам нужно реализовать $render самостоятельно. Это кажется странным, поскольку входы уже отображаются правильно при изменении значения модели.

app.directive('renderOnBlur', function() {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, elm, attrs, ctrl) {
            elm.bind('blur', function() {
                console.log('rendering ctrl', ctrl);
                ctrl.$render();
            });
        }
    };  
});

P.S. Я понятия не имею, что делает restrict: 'A', - это истинное грузо-культовое программирование в худшем случае. Кажется, что require: 'ngModel', заполняет параметр ctrl.

---

Вдохновленный ответом от @Dan Doyen, я переписал его как:

app.directive('renderOnBlur', function() {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, elm, attrs, ctrl) {
            elm.bind('blur', function() {
                var viewValue = ctrl.$modelValue;
                for (var i in ctrl.$formatters) {
                    viewValue = ctrl.$formatters[i](viewValue);
                }
                ctrl.$viewValue = viewValue;
                ctrl.$render();
            });
        }
    };  
});

Это может быть общим для любого $formatter, а не повторять код форматирования, как в ответе Дэна.