Javascript 更新选项时，带有ng重复的角度选择将丢失选定选项

我正在尝试使用AngularJS为动态列表创建一个编辑器。对于每个项目，我想添加一个选择列表，其中包含列表中所有元素的选项。当一个项目被添加到列表中（JSFIDLE中的Add按钮）时，另一个选择将丢失其值。模型不受此影响，只受视图的影响。我错过了什么

这是我的名片

视图：

{{msg}
身份证件
参考资料
{{i.id}
添加
{{items}json}

控制器：

selectDemo.controller('selectDemoCtrl', function ($scope) {
    $scope.items = [{
        id: 1,
        ref: 2
    }, {
        id: 2,
        ref: 1
    }];

    $scope.addItem = function(){
        var newitem = {id: 1, ref:1};
        for (var i = 0; i < $scope.items.length; i++){
            if ($scope.items[i].id >= newitem.id) { newitem.id = $scope.items[i].id + 1; }
        }
        if ($scope.items.length > 0){newitem.ref = $scope.items[0].id;}
        $scope.items.push(newitem);
    };
});

selectDemo.controller（'selectDemoCtrl'，函数（$scope）{
$scope.items=[{
id:1，
参考：2
}, {
id:2，
参考：1
}];
$scope.addItem=函数（）{
var newitem={id:1，ref:1}；
对于（变量i=0；i<$scope.items.length；i++）{
如果（$scope.items[i].id>=newitem.id）{newitem.id=$scope.items[i].id+1；}
}
如果（$scope.items.length>0）{newitem.ref=$scope.items[0].id；}
$scope.items.push（newitem）；
};
});

不要使用ngRepeat，它对于绑定模型不可靠。相反，它应该按预期工作：

<select ng-options="i.id as i.id for i in items" ng-model="item.ref"></select>

演示：

<select ng-options="i.id as i.id for i in items" ng-model="item.ref"></select>