Angular accordion example

HTML

<div ng-controller='Ctrl1'>
    <p>loaded: {{graphData}}</p>
    <hr/>
    <ul>
        <li ng-repeat="name in names">
            <div ng-click="togglePanel($index)">{{name}}</div>
            <div id='panel' ng-if='show[$index]'>Graph Here on click of name: {{graphData}}</div>
        </li>
    </ul>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('Ctrl1', function ($scope) {
    var openId = null;

    function closePanel(id) {
        $scope.show[id] = false;
        openId = null;
        $scope.graphData = null;
    }
    $scope.graphData;
    $scope.show = {};
    $scope.names = ['Name 1', 'Name 2', 'Name 3'];
    $scope.togglePanel = function (id) {
        if (openId === id) {
            closePanel(openId);
            return;
        }
        if (openId !== null) {
            closePanel(openId);
        }
        $scope.show[id] = true;
        openId = id;
        $scope.graphData = loadData(id);
        //alert('load graph #' + (id+1));
    }

    function loadData(id) {
        return 'graph #' + (id + 1);
    }
});