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

i using angular-ui. trying reduce html coding making reusable elements angular directives. i'm missing something. want this:

<modal modal-title="some title" button-text="click me">modal content</modal>

and want output modal , button instead of adding markup on , on modal can use custom element. seems working except can not life of me figure out how content inside of element. here's basics of 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 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 content of element mctrl.content? rest of works expected, i'm missing something. thanks!

edit: seems need use transclusion, want do:

<div class="modal-body"><ng-transclude></ng-transclude></div>

but kind of error when open modal:

[ngtransclude:orphan] illegal use of ngtransclude directive in template! no parent directive requires transclusion found. element: <ng-transclude>