How to handle elements when calling "ng-repeat" recursively? (Corrected)

Question

JavaScript

The title is probably not correct, I'll try to explain, if anything - ask - I'll clarify:
There is a recursive call to ng-repeat (part in parts), how to remove the current part from parts at any " level ".
There is a "Remove this" link in the parts.html file with ng-click="" (I want to make it work).
plnkr.co/edit/rSVvK8U3qQ09LFdiv2S0
Additionally: I have two more buttons (Add child and Remove childs) that work, but I'm not sure if this solution is correct:

// в html
<a ng-click='part=removeChilds(part)'>Remove childs</a>
// в контроллере
$scope.removeChilds = function (part) {
  delete part.parts;
  return part;
};

How to do it right? Or is it ok?
++ UPD
Basically I got it to work:

// в html
<a ng-click='$parent.$parent.part=removeThis($parent.$parent.part, $index)'>R...s</a>
// в контроллере
$scope.removeThis = function (parent, index) {
      parent.parts.splice(index);
      return parent;
 };

plnkr.co/edit/Bijxyat98l9yKxMvzp6v The
question remains:
What is the right way to do this? Or is it ok?
++ UPD - Changed the theme!

Answer 1

During ngRepeat the $index variable is available .
Use something like this:

<div data-ng-repeat="cock in cocks">
    <p data-ng-bind="cock.title"></p>
    <a href="" data-ng-click="removeCock($index)">&times;</a>
</div>

$scope.removeCock = function(index) {
    $scope.cocks.splice(index, 1);
};

// upd Will
this option work?

<div data-ng-repeat="cock in cocks">
    <p data-ng-bind="cock.title"></p>
    <a href="" data-ng-click="cocks.splice($index, 1)">&times;</a>
</div>