Javascript angularjs动态下拉列表，带数量减去已删除项

我有一个动态下拉列表，除此之外还有一个文本框，用于显示所选项目的数量，并删除添加的下拉列表，该下拉列表与新添加的下拉列表的数量文本框存在冲突。它正在使用默认值填充该下拉列表。新添加的下拉列表的数量文本框的值应默认为

0

HTML

我得到每个下拉列表的所有数量文本框的总和

var total_quantity = 0;
angular.forEach($scope.quantity,function(value, index){
    total_quantity  += value;
});
console.log(total_quantity);

但是，当我尝试删除一个动态添加的下拉列表，并添加另一个下拉列表时，在新添加的下拉列表的数量中有一个自动填充的数字，它应该是

0

console.log（total_quantity）也会弄乱并添加一个不应该更改的数字

另外，

total_quantity

是错误的，如果我删除下拉列表，

quantity

没有减少，我不知道如何扣除该数量

JSFIDLE

$scope.products = [
    { 
        id: 1, 
        name: 'Product 1',
        price: 100
    },
    { 
        id: 3, 
        name: 'Product 2',
        price: 100
    },
];

$scope.addons = [];
            
$scope.addAddons = function(){  
    $scope.addons.push({});
}

$scope.removeAddon = function(index){
    $scope.addons.splice(index,1);
}

var total_quantity = 0;
angular.forEach($scope.quantity,function(value, index){
    total_quantity  += value;
});
console.log(total_quantity);