AngularJS list of toggle buttons directive -

i wanted create reusable component of toggles/switches list.

i've made <toggle> directive, , want <toggle-list> containing multiple <toggle>'s.

<toggle-list>   <toggle value="a">toggle a</toggle>   <toggle value="b">toggle b</toggle> </toggle-list> 

.

app.directive("toggle", function(){ return {     scope: {},     restrict: "e",     transclude:true,     templateurl: "toggle-element.html",      link: function(scope){       scope.toggled = false;        scope.toggle = function(){         scope.toggled = !scope.toggled;       }     } } }); 

here's working plnkr.

i want <toggle-list> return eg. array of values selected.
how implement this?
way of doing this, or trying reinvent wheel?

in child directive

require: '^togglelist', 

now have access togglelist via fourth parameter of link function.

function(scope, el, attrs, togglelistctrl, $transclude) 

then call method on parent controller

from toggle directive fill array child elements :

scope.rank = togglelistctrl.addtoggle(el); 

in parent controller:

this.toggles = []; this.addtoggle = function (toggle) {   var rank = this.toggles.push(toggle);   return rank; };