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

Full code >>>

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) {

    var targetcircle = $(;


    var targetcontent = document.querySelectorAll('.' + targetcircle.attr("id")); 
    targetcontent =;

    console.log(targetcontent); // returns an empty array
    // 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.


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