How to connect links to bootstrap accordion properly (angularjs)?

Full code >>> https://plnkr.co/edit/uyq9G2Nflr1iaxvr09Wa?p=preview

I have a bootstrap accordion that I want to connect to a number of svg circles with links on them.

Since i’m using angular, I have put ng-click="clickcollapseOuter($event)" directives on each svg link (outer circles). Which triggers this function defined in the angular controller:

$scope.clickcollapseOuter = function(e) {
    $('#accordion .collapse.in').collapse('hide');
    $('#inner-accordion .collapse.in').collapse('hide');

    var targetcircle = $(e.target);

    $(".svgcircle").removeClass("fff-onfocus");
    targetcircle.toggleClass("fff-onfocus");

    var targetcontent = document.querySelectorAll('.' + targetcircle.attr("id")); 
    targetcontent = Array.prototype.slice.call(targetcontent);

    console.log(targetcontent); // returns an empty array
    targetcontent.collapse('toggle'); 
    // TypeError: targetcontent.collapse is not a function

  };

As you can see from my comments in this code section, I am having two issues:
Firstly, the targetcontent array is empty when it’s supposed to contain the target’s matching collapsible div (configured in the linked javascript file). Second, I am getting a TypeError when I try to use bootstrap’s collapse method on the matching div.

Also $(".svgcircle").removeClass("fff-onfocus"); is not removing the class before it is added onto another circle.

Where am I going wrong ? Many thanks.

UPDATE

Empty array fixed by moving the id to the circle instead of its link.
Still working on the .collapse() not a function issue.

Source: AngularJS