Cannot delete dynamically created SVG paths

I have some dynamically created SVG paths which connect some div. And on clicking on the paths they are deleted. The problem is I am only able to delete the paths in a LIFO order because of the way the SVGs are styled. They are stacked on top of one another as they are added so I am unable to access the ones that were added before. How do I fix this?

<div class="boundary">
    <div ng-repeat="edge in edges track by $index">
        <svg id="svg">
            <path id="boxPath_{{edge.id}}" class="boxPath" ng-click="deleteEdge(edge)"></path>
        </svg>
    </div>
</div>

#svg {
    position: absolute;
    width: 100%;
    height: 100%;
  }

$scope.deleteEdge = function(edge){
   var index = $scope.edges.lastIndexOf(edge)
   $scope.edges.splice(index, 1);
}