How to Access HTML Inside of Angular Directive (Transclusion) - angularjs

Question

I am using angular-ui. I am trying to reduce html coding my making reusable elements with angular directives. I'm definitely missing something. What I want to do is this:
<modal modal-title="Some Title" button-text="Click Me">Modal Content</modal>
And I want that to output the modal and button so instead of adding all that markup over and over for the modal I can just use this custom element. It seems to be working except that I can not for the life of me figure out how to get the content inside of the element. Here's the basics of what I'm doing:
angular.module('app').directive('modal', function () {
return {
templateUrl: 'partials/modal.html',
restrict: 'E',
controller: 'modalController',
controllerAs: 'mCtrl',
transclude: true,
link: function postLink(scope, element, attrs) {
scope.buttonText = attrs.buttonText;
scope.modalTitle = attrs.modalTitle;
}
};
}).controller('modalController', function($scope,$modal,$attrs) {
var _this = this;
this.buttonText = $attrs.buttonText;
this.modalTitle = $attrs.modalTitle;
this.open = function () {
var modalInstance = $modal.open({
templateUrl: 'modal-content.html',
controller: 'ModalInstanceCtrl',
controllerAs: 'miCtrl',
resolve: {
modalTitle: function() { return _this.modalTitle; }
}
});
modalInstance.result.then(function (selectedItem) {
//something
}, function () {
console.info('Modal dismissed at: ' + new Date());
});
};
this.save = function() {
//something
};
}).controller('ModalInstanceCtrl', function ($scope, $modalInstance, modalTitle) {
this.modalValue = 1;
this.modalTitle = modalTitle;
this.ok = function () {
$modalInstance.close(this.modalValue);
};
this.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Here's the template (partials/modal.html)
<script type="text/ng-template" id="modal-content.html">
<div class="modal-header">
<h3 class="modal-title">{{miCtrl.modalTitle}}</h3>
</div>
<div class="modal-body"> {{ mCtrl.content }} </div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="miCtrl.ok()">OK</button>
<button class="btn btn-warning" ng-click="miCtrl.cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="mCtrl.open()">{{mCtrl.buttonText}}</button>
How do I get the content of the element into mCtrl.content? The rest of it works as expected, I'm just missing something. Thanks!
Edit: It seems I need to use transclusion, so this is what I want to do:
<div class="modal-body"><ng-transclude></ng-transclude></div>
But I get this kind of error when I open up the modal:
[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <ng-transclude>