Toggle attribute for individual divs when matching link is clicked

Full code here: https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview

I have an angular ui bootstrap accordion here (each repeated panel has a nested accordion):

<uib-accordion close-others="oneAtATime">
    <div ng-repeat="sub in subdivisions">
      <div uib-accordion-group  id="accordion" is-open="status.open"
           class="outercontent" ng-repeat="prov in sub.province"
           heading="{{prov.name}}">

        <!-- INNER ACCORDION -->
        <uib-accordion close-others="oneAtATime">
          <div uib-accordion-group  id="inner-accordion" class="innercontent"
               ng-repeat="dist in sub.district" heading="{{dist.name}}" >
            <!-- ul of communes -->
          </div>  
        </uib-accordion>

      </div>
    </div>
  </uib-accordion> 

And I have a set of links around svg elements here:

<svg height="300" width="425" id="svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

      <g id="adrargroup" >  
        <a ng-click="clickOuter($event);" class="svgcircle big"><circle cx="50" cy="50" r="40" id="adrarouter" class="circle"/></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="adrarinner"><circle cx="50" cy="100" r="10" /></a>
          <a ng-click="click($event)" class="svgcircle small" id="boudainner"><circle cx="50" cy="150" r="10" /></a>
          <a ng-click="click($event)" class="svgcircle small" id="ouledahmedtimmiinner"> <circle cx="50" cy="200" r="10" /></a>
      </g>
      <g id="algiersgroup" > 
        <a ng-click="clickOuter($event)" class="svgcircle big"><circle cx="150" cy="50" r="40" id="algiersouter" class="circle"/></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="babelouedinner"><circle cx="150" cy="100" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="barakiinner"><circle cx="150" cy="150" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="birmouradraisinner"><circle cx="150" cy="200" r="10" /></a>
      </g>
      <g id="aindeflagroup" > 
        <a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="250" cy="50" r="40" class="circle" id="aindeflaouter" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="aindeflainner"><circle cx="250" cy="100" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="ainlechiakhinner"><circle cx="250" cy="150" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="bathiainner"><circle cx="250" cy="200" r="10" /></a>
      </g>
      <g id="chlefgroup" > 
        <a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="350" cy="50" r="40" id="chlefouter" class="circle"/></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="abouelhassaninner"><circle cx="350" cy="100" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="ainmeraneinner"><circle cx="350" cy="150" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="benihaouainner"><circle cx="350" cy="200" r="10" /></a>
      </g>

</svg>

What i’m trying to achieve is when each link is clicked, the target link’s matching div in the accordion opens.

I tried to do this by triggering this function on click:

$scope.clickOuter = function(e) {

    var targetcircle = e.target;

    for(i=0; i<circle.length; i++) {
      circle[i].classList.remove("fff-onfocus");
    }
    targetcircle.classList.toggle("fff-onfocus");

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

    for(i=0; i<targetcontent.length; i++) {
      targetcontent[i].setAttribute("is-open", "!status.open");
    }

};

This part of the function:

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

for(i=0; i<targetcontent.length; i++) {
  targetcontent[i].setAttribute("is-open", "!status.open");
}

Gets the target circle’s id and retrieves the matching div. It then changes the is-open (default value = false) attribute’s value to !status.open (true).
However this is not working fully when I test it. I click the link, it returns the matching div and changes the value of is-open attribute but no divs in the accordion are actually opening or closing.

(in this https://plnkr.co/edit/M6ZjYSlzgmDQYXFzOurD?p=preview plunker example the last panel can be toggled through making status.open true )

My second problem is that this part:

for(i=0; i<circle.length; i++) {
      circle[i].classList.remove("fff-onfocus");
    }
    targetcircle.classList.toggle("fff-onfocus");

is removing the class from one circle when another is clicked but won’t let you toggle the one selected when clicked again.

So 2 problems:

  1. target div isn’t being toggled open/close when matching link/circle is clicked.
  2. fff-onfocus class isn’t being toggled.

Any help would be greatly appreciated. Thanks.

Edit
Tried this and still not working:

$scope.state = {};
$scope.state.isclosed = false;
$scope.state.isopen = true;

div attribute: is-open="state.isclosed", inside function: targetcontent[i].setAttribute("is-open", "state.isopen");

Source: AngularJS