Toggle click function on list of items in AngularJS (iframe)

Question

So I have the below work-flow:

I've got a list of items each having an ng-click event which opens an iframe below the item clicked. Now,

• On clicking an item of the list, a div tag below that item displays (initially hidden) which contains an iframe.
• Now on clicking another item from the same list, another div tag displays below the recent item clicked, which in turn displays the iframe for the recently clicked item.

The issue that I'm facing is this -

On clicking an item of the list, if any div tag containing the iframe is currently open, it gets closed and the div tag along with the iframe of the recently clicked item displays.

Currently, if any iframe is open, on clicking an other item from the list, a new iframe of the recently clicked item opens along with the initial iframe still remaining open. The initial one getting closed only after I've clicked on it.

What shall I do?

PS: I hope the scenario is clear, let me know if further clarification is required.

Edit-

Posting a jsfiddle link is kinda tough as this question is a part of a huge folder I'm working on. But, I'll post the code here and hope that it will suffice.

HTML:

<div ng-repeat="data in JsonData">
    <div class="row" ng-click="getGraph(data.id, $index)">
        <div class="col-lg-6 text-left">
            <span id="title">Title: &nbsp;{{data.name}}</span><br><br>
            <span style="color: #000 !important">
                <strong>Id:</strong> &nbsp;{{data.id}}
            </span><br/><br>
        </div>
        <div class="col-lg-4 text-left" style="color: #000 !important;">
            <span style="text-align: left; font-size: 13px;">
                  <strong>Details:</strong> {{data.details}}
            </span><br/>
        </div>
        <div class="iframe col-lg-10 col-lg-offset-2">
            <div class="ibox float-e-margins ibox_shadow">
                <iframe style="width: 80%; height: 50%; id="targetframe" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ng-src="{{graphUrl | trustAsResourceUrl}}">
                </iframe>
            </div>
        </div>
    </div>
</div>

And the controller.js code:

$scope.getGraph = function(d,i) {
        $scope.graphUrl = 'http://server-url.com:8888/path/to/theGraph?id='+d;
        var elem = document.getElementsByClassName(d);
        $(elem).toggleClass('class_to_toggle_hide_show');
}

Answer 1

If you post the code it will clear it more. But in the ng-click event you can first say ng-click="youfunction($event)" and

$scope.yourfunction = function(event){
   $(even.target).find("iframe").remove();
   //and then your other stuff here  

}