javascript - How to make an accordion with d3 and angular? -

i trying make accordion d3.js , angular.js. have taken code couple different places , tried piece work not luck. here have far:

<div ng-app="myapp">     <accordion></accordion> </div>  var app = angular.module('myapp', []);  app.controller('accordioncontroller', function($scope){ //initiate array hold active tabs $scope.activetabs = []; //check if tab active $scope.isopentab = function (tab) {     //check if tab in activetabs array     if ($scope.activetabs.indexof(tab) > -1) {         //if so, return true         return true;     } else {         //if not, return false         return false;     } }  //function 'open' tab $scope.opentab = function (tab) {     //check if tab open     if ($scope.isopentab(tab)) {         //if is, remove activetabs array         $scope.activetabs.splice($scope.activetabs.indexof(tab), 1);     } else {         //if it's not, add it!         $scope.activetabs.push(tab);     } } })  app.directive('accordion', function(){ function link(scope, el){     d3.select(el[0]).append("div")         .attr('class', 'accordioncontainer')         .attr('ng-controller', "accordioncontroller");      var accordion = d3.select(".accordioncontainer");      (var = 1; <=5; i++) {         var accordiontab = accordion.append("div")             .attr('class', 'accordiontab');          accordiontab.append("div")             .attr('class', 'accordiontabtitle')             .attr('ng-click', "opentab('tab " + + "')")             .text("tab " + i);          accordiontab.append("div")             .attr('class', 'accordiontabcontent')             .attr('ng-click', "isopentab('tab " + + "')")             .text("tab " + + " content goes here!");     }  }  return {     link:link,     restrict: 'e' } }) 

i new d3 , new angular. appreciated. thanks.