求教 Angularjs component 封装 inputbox

我想用 component 封装一个 inputbox 文本输入框，还是需要用 ng-model 去绑定变量，然而绑定变量得到的值需加上某些前缀。比如在输入框内输入 "abcd" , 对应的 model 变量会被处理为 ” textPrefixabcd"

Component 我是这样写的：

angular.module('').component('dummyBox', {
    bindings: {
        ngModel: '='
    },
    require: {
        ngModelCtrl: 'ngModel'
    },
    template: '<span><input type="text" ng-model="$ctrl.ngModel" /></span>',
    controller: function() {
        $ctrl.$onInit = () => {
            $ctrl.ngModelCtrl.$parsers.push((viewValue) => {
                if(viewValue) return "testPrefix" + viewValue;
            });

            $ctrl.ngModelCtrl.$formatters.push((modelValue) => {
                return modelValue.substr("textPrefix".length);
            });
        }
    }
});

然后在外部使用时这样：

<dummy-box ng-model="outScopeVar"></dummy-box>
<label>{{outScopeVar}}</label>

为什么不对呢，label 打印出来的永远是实际输入的值。是 ngModel 绑定错了，还是我对$formatters 和 $parsers 的理解不对？求前端大佬们指点