Angular. Removing in a nested directive with ng-repeat - angularjs

Question

I'm new to AngularJS and have problem with removing certain element in a nested custom directive with ng-repeat. Here is my plunker
I have such structure of nested directives:
<button ng-click="mc.addCat()">Add Category</button>
<category ng-repeat="cat in mc.main.categories">
<ul class="first-level">
{{ $index +1 }}. Category
<br>
<input type="text" ng-model="mc.main.categories[$index].name">
<button ng-click="cc.removeCat($index)">Del Category</button>
<button ng-click="cc.addItem()">Add Item</button>
<item ng-repeat="item in cc.cat.items track by item.id">
<li class="second-level">
{{ $parent.$index +1 }}.{{ $index +1 }}
<input type="text" ng-model="mc.main.categories[$parent.$index].items[item.id].name">
<button ng-click="ic.removeItem(item)">del</button>
</li>
</item>
</ul>
</category>
Adding and removing categories works as I need and the parent model updates.
But when I enter something in the item field, and then remove it, this item remains in the parent model.
I think my issue in nested scopes, could you tell me what am I doing wrong?
Thanks!

Answer 1

the delete function in directive should call a method to update the main model....i have edited the plunker and forked the edit....
`
$scope.$on('updateItems',function(event,index,pindex){
console.log(index);
console.log(pindex);
var sti = ""+index+"";
delete vm.main.categories[pindex].items[sti];
});
`
here is the plunker link plunker

Answer 2

From what i understand from your code is, your new item is being added and you are entering some information which is updating your parent model....
<input type="text" ng-model="mc.main.categories[$parent.$index].items[item.id].name">
While deleting the items, you are deleting the copy and the original object.
$scope.$on('delItem', function(event, data){
var items = vm.cat.items;
items.splice(items.indexOf(data), 1);
});
All the below function in category seems to be not working..
vm.cat = {
items: [{
id: 0,
name: ''
}]
};
vm.itemId = 0;
vm.addItem = function() {
vm.itemId = vm.itemId + 1;
var item = {
id: vm.itemId,
name: ''
};
vm.cat.items.push(item);
};
$scope.$on('delItem', function(event, data) {
var items = vm.cat.items;
items.splice(items.indexOf(data), 1);
});