AngularJS directive Example scope

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" ></script>

<div ng-app="app">
    <div ng-controller='ctrl'>
        <fieldset fieldset-collapse>
            <legend>Legend</legend>
            <input/>
            <input/>
            <input/>
            <p>{{foo}}</p>
        </fieldset>
    </div>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('ctrl', function($scope){
    $scope.foo = "hello from controller";
});


app.directive('fieldsetCollapse', function() {
  return {
    restrict: 'A',
   // scope: {},
    compile: function(tElement, tAttrs, transclude) {
      var wrapperElement = angular.element('<div ng-show="isOpen"></div>'),
          legendElement = tElement.find('legend'),
          collapsibleContent = tElement.children(":not(legend)"),
          toggleBtn = angular.element('<a href="#" class="twisty" ng-class="{ true: \'twisty-open\', false: \'twisty-closed\' }[isOpen]" ng-click="toggle()"></a>');

          legendElement.css('cursor', 'pointer').attr('ng-click', 'toggle()');
          tElement.css({ 'position': 'relative', 'marginLeft': '20px' });
          tElement.prepend(toggleBtn);

          angular.forEach(collapsibleContent, function(obj, i) {
            $(obj).remove();
            wrapperElement.append(obj);
          });

          tElement.append(wrapperElement);

          return function(scope, element, attrs) {
            var directiveValue = (scope.$eval(attrs.gaigCollapsibleFieldset));
            scope.isOpen = (directiveValue == undefined) ? true : directiveValue;

            scope.toggle = function() {
              scope.isOpen = !scope.isOpen;
            }

          };
    }
  }
});