Directive contains transculde with isolated scope - angularjs

Question

I have a template as following header, body(ng-transclude), footer
<div class="wfm-modal">
<div class="modal-header">
<button type="button" id="close-button" class="close" ng-click="cancel()" aria-label="Close"
ng-show="allowClose">
</button>
<h3 class="modal-title">{{title}}</h3>
</div>
<ng-transclude></ng-transclude>
<div class="modal-footer">
<div class="button-row text-right">
<!-- Save button -->
<button id="save" type="submit" ng-click="save()" class="btn btn-primary">
<span ng-if="saveLabel">
{{saveLabel}}
</span>
</button>
</div>
</div>
</div>
As you can see I have a wfm-modal which contains header body(which is ng-transclude) and footer.
My directive:
app
.directive('wfmModal', function ($window, $timeout, _, $log, $compile, $templateCache) {
'use strict';
var link = function (scope, element, attr, controller, transclude) {
transclude(scope.$parent, function(clone, scope) {
element.empty();
element.append(clone);
});
};
return {
restrict: 'E',
link: link,
templateUrl: 'directives/wfmModal/wfmModal.tpl.html',
replace: true,
transclude: true,
scope: {
title: '=',
allowClose: '=',
cancel: '=',
save: '=',
saveLabel: '#',
delete: '='
//delete: '=',
//deletePopover: '#'
}
};
})
My problem: when I dont add the
transclude(scope.$parent, function(clone, scope) {
element.empty();
element.append(clone);
});
to link function then the scope of the body(the content of ng-transclude) is empty on the save that done from the footer(the directive) not from the code of the ng-transclude
when I add this transclude(scope, function...) without the line: element.empty(); then the body the content of ng-transclude is duplicated,
when I add element.empty(); then the header and the footer are disappeared and only the content of ng-transculde is displayed.
I want to connect the scope of ng-transclude to the directive's scope without disrupt the UI

Answer 1

In directive's link function add:
link = function (scope, element, attr, controller, transclude) {
transclude(scope.$parent, function(clone, scope) {
var el = element.find('.wfmBody');
el.append(clone);
});
In html file instead of ng-transclude add:
<div class="wfmBody"></div>