Javascript 模型属性更改后未更新输入元素

我使用按钮向输入元素追加一个值。虽然模型变量已更新，但输入值保持不变。如何修复它

<input type="text"
                           class="form-control"
                           id="inputSecurityCode"
                           style="width: 100%"
                           placeholder="4 digits"
                           name="inputSecurityCode"
                           ng-model="reservation.securityCode"
                           ng-pattern="patterns.securityCode"
                           ng-focus="focused('inputSecurityCode')"
                           ng-blur="blurred('inputSecurityCode')"
                            />
<button type="button" ng-click="numButtonClick(1)">1</button>

更新

可能是因为起始值是

未定义的

，

NaN

，尝试NaN加整数时返回NaN，无法添加到输入中。它应该是

null

而不是

未定义的

更新2

所有未定义的
已更改为
null
s，但观察到相同的行为

更新3

我发现，当我删除
ng pattern=“patterns.securityCode”
时，一切都正常。为什么？
编辑：这似乎不是OP的问题，可能是不正确的信息

这是因为AngularJS不会自动传播对对象基本体属性的更改

手动重新应用绑定，如下所示：

$scope.numButtonClick = function(num){
            switch($scope.focusedInput){
                case 'inputSecurityCode':
                    $scope.$apply(function(){
                         $scope.reservation.securityCode += num;
                    });
                    break;
            }

    };

您说过“模型变量已更新”。所以我想不是吗？我得到了
错误：[$rootScope:inprog]
我做了编辑。试试看。如果它不起作用，问题可能是其他问题。当使用$scope.reservationSecurityCode而不是具有基本属性securityCode的对象保留时，代码是否工作？在将一些值放入
输入
后，更改为
$scope.reservationSecurityCode
后，会出现相同的错误模型变量未被更新。按下按钮后，现有值被重置，
reservationSecurityCode
变为
undefined
$scope.numButtonClick = function(num){
            switch($scope.focusedInput){
                case 'inputSecurityCode':
                    $scope.$apply(function(){
                         $scope.reservation.securityCode += num;
                    });
                    break;
            }

    };