Javascript 组件内的输入会破坏AngularJS的双向绑定

我创建了一个简单的组件：

(function (module) {
    'use strict';
    function SomeCtrl() {
        this.foo = function (event) {
            this.someArray.forEach(function (part, index, array) {
                //somelogic
                array[index] = array[index] + " (foo)";
            });            
        }
    }

    module.component('componentName', {
        templateUrl: 'blah.html',
        controller: SomeCtrl,
        bindings: {
            someArray: '=',
        }
    });
})(module);

Html模板也很简单：

<div class="input-group">
    <input type="text" class="form-control" ng-model="$ctrl.someArray" />
    <span class="input-group-btn">
        <a class="btn btn-default" ng-click="$ctrl.foo($event)">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
        </a>
    </span>
</div>
{{$ctrl.someArray}}

{{$ctrl.someArray}

基本上是一些输入和按钮。输入与数组绑定，并在单击按钮时修改数组

不幸的是，组件的行为很奇怪。表达式（

{{$ctrl.someArray}}

）已更新，但输入值保持不变

另一方面，当用户修改输入值时，表达式会正确更改

没有抛出错误，没有任何错误。它甚至不是单向绑定，而是异常的数据流阻塞…

var module=angular.module（'myApp'，[]）；
module.component（'componentName'{
控制器：函数SomeCtrl（）{
this.foo=函数（事件，数组）{
this.someArray.forEach（函数（部分、索引、数组）{
//某些逻辑
//数组[index]={'no'：数组[index].no+“foo”}；
log（数组[index]={'no'：数组[index].no+“foo”}）；
});  
}
}, 
模板：`

{{$ctrl.someArray}
可以
`,         
绑定：{
someArray:“=”，
}
});
问题在于如何更新阵列：

this.someArray.forEach(function (part, index, array) {
    //somelogic
    array[index] = array[index] + " (foo)";
}); 

AngularJS似乎没有检测到对数组执行的这种更改。解决方案非常简单：

var newArray = []
this.someArray.forEach(function (part, index, array) {
    //somelogic
    newArray.push(array[index] + " (foo)");
}); 
this.someArray = newArray;

你能创造一个木偶/小提琴吗？