如何在Angular中屏蔽ssn输入到xxx-xx-1234？

Question

所以我有一个名为ssnMask的指令，如下所示：

return {
  require: 'ngModel',
  restrict: 'A',
  link: function(scope, element, attrs, ngModel) {
    function format(value) {
      if (value && value.length === 9) {
        var mask = 'xxx-xx-' + value.substr(5);

        ngModel.$setViewValue(mask);
        ngModel.$render();
      }

      return value;
    };

    ngModel.$parsers.push(formatter);
  }
};

我在模板上与ui-mask一起使用它：

<input id="ssn"
           ng-model="ctrl.ssn"
           ssn-mask
           ng-model-options="{ updateOn: 'blur' }"
           name="ssn"
           type="text"
           ui-mask="999-99-9999"
           ui-mask-placeholder-char="space" />

我的预期行为是输入9位数，然后前5位变为xxx-xx模糊。这完全按照预期工作，但每当我重新回到该字段时，它会移除xxx-xx并且我只剩下最后4位数（假设是因为ui-mask）。有没有办法让所有9个数字都显示在焦点上，但在模糊时会被掩盖？