Angular not compiling inside custom directive-Collection of common programming errors

I have a directive that looks like this:

app.directive('fieldsetCollapse', function() {
return {
    restrict: 'A',
    scope: {},
    compile: function(tElement, tAttrs, transclude) {
        var wrapperElement = angular.element(''),
            legendElement = tElement.find('legend'),
            collapsibleContent = tElement.children().not('legend'),
            toggleBtn = angular.element('');

        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;
            }

        }
    }
}

});

Which works with this markup:

 ... 

If I try adding anything inside such as this:

{{foo}}

…where foo is defined on the scope of my controller, the output is

{{foo}}

Angular isn’t compiling anything I add between my tag with the directive. Am I missing something to make this happen inside my directive?

1. You are creating an isolated scope in the directive definition object

   return {
       restrict: 'A',
       scope: {} //