Angularjs Directive - collapse buttons

Directive example http://stackoverflow.com/questions/16138658/angularjs-create-directive-pass-in-array-of-key-value-pairs-for-buttons-that-r

HTML

<body ng-app="app">
  <div ng-controller="ParentCtrl">
       <div collapse-widget title="Click to Expand Buttons" 
      buttons="model.buttons"></div>
  </div>
  <div ng-controller="ParentCtrl">
       <div collapse-widget title="Click to Expand Buttons" 
      buttons="model.buttons2"></div>
  </div>
</body>

CSS

div[collapse-widget]{
    cursor: pointer;
}

JavaScript

var app = angular.module("app", ['main']);

angular.module('main', [])
.controller("ParentCtrl", ['$scope', function( $scope ){

    $scope.doSomething = function(){
        alert('do something called from parent');
    }
    $scope.doSomethingElse = function(){
        alert('do something else called from parent ');
    }
    
    $scope.model ={
        buttons: {'Test Button': $scope.doSomething, 'Another Button': $scope.doSomethingElse},
        buttons2: {'Test Button2': $scope.doSomethingElse, 'Another Button2': $scope.doSomething}
    }
}])

.directive("collapseWidget", function factory() {
  return {
    template: '<div ng-init="collapsed=true">'+
                    '<h2 ng-click="collapsed= !collapsed">{{title}}</h2>'+
                    '<button ng-hide="collapsed" '+
                            'ng-repeat="(name, fn) in buttons" ng-click="fn()">{{name}}</button>'+
                '</div>',
    replace: true,
    restrict: 'A',
    scope: {
        title: "@",
        buttons: "="
    },
    link: function postLink( scope, element, attrs ) {
      console.log("scope", scope );
    }
  };
});