can I assign multiple $watchCollection programmaticaly? - angularjs

Question

Imagine that I have an array called buckets. that array will contain objects called bucket where each bucket has a property called images which is an array. Example:
vm.buckets = [
{name: "bucket1", images: []},
{name: "bucket2", images: []},
{name: "bucket3", images: []}
]
I am dynamically adding new buckets to vm.buckets , but also dynamically adding new images to each bucket. Is there a way to create a new $watchCollection and assign it to every new bucket so that i can watch for new images being inserted into each bucket?

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
var vm = this;
vm.buckets = [
{ name: "bucket1", images: [] },
{ name: "bucket2", images: [] },
{ name: "bucket3", images: [] }
];
var counter = vm.buckets.length;
vm.Addbucket = function() {
var temp = {
name: 'bucket' + (++counter),
images: []
};
vm.buckets.push(temp);
AddWatch(temp);
}
vm.DeleteLastBucket = function(){
vm.buckets[vm.buckets.length - 1].unregisterWatch();
vm.buckets.splice(vm.buckets.length - 1, 1);
}
function AddWatch(x) {
var index = vm.buckets.indexOf(x);
var id = `buckets[${index}].images`;
x.unregisterWatch = $scope.$watchCollection(id, function() {
console.log(`Changes at ${x.name} images`);
});
}
$scope.buckets = vm.buckets;
vm.buckets.forEach(AddWatch);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl as vm'>
<ul>
<li ng-repeat='item in vm.buckets'>
{{item.name}}: {{item.images.length}} images
<button ng-click='item.images.push("temp")'>Add image</button>
</li>
</ul>
<button ng-click='vm.Addbucket()'>Add bucket</button>
<button ng-click='vm.DeleteLastBucket()'>Delete last bucket</button>
</div>