Transclusion in Angular UI Modal not working
<p>The objective of <a href="http://plnkr.co/edit/1qraIEZFgGyG27bHNZRV?p=preview" rel="noreferrer">this plunk</a> is to transclude elements into an Angular UI Modal from a controller, where the Modal is wrapped by a directive. The solution should follow these premises:</p>

<ul>
<li>The directive declares the transclusion of fields. These fields are included in the directive declaration in the controller HTML markup.</li>
<li>These fields declared in the controller should show up in the Modal.</li>
<li>The scope of these fields should be accessible in the controller (see that I declared an <code>input1</code> variable in the controller that should set a value in the Modal).</li>
<li>I defined a <code>content</code> element to transclude the fields. This element is in the modal's template. I'm not sure when this template is available to transclude it.</li>
</ul>

<p>To summarize, the objective is to have a set of fields declared in the controller HTML markup and available in the modal, where the modal is wrapped in a directive and the scope is managed in the controller. Any ideas will be greatly appreciated.</p>

<p>HTML</p>

<pre><code>&lt;div the-modal control="modalCtl"&gt;
    &lt;p&gt;some text&lt;/p&gt;
    &lt;input type="text" ng-model="input1" /&gt;
&lt;/div&gt;

&lt;button type="button" ng-click="open()"&gt;Open me!&lt;/button&gt;
</code></pre>

<p>Javascript</p>

<pre><code>var app = angular.module("app", ['ui.bootstrap']);

app.controller("ctl", function($scope,$timeout) {

  $scope.modalCtl = {};

  $scope.input1 = "abc";

  $scope.open = function(){
    $scope.modalCtl.openModal();
  };

});


app.directive("theModal", function($uibModal) {
  return {
    restrict: "AE",        
    scope: {              
      control: "="
    },
    transclude: true,
    link: function (scope, element, attrs, ctrl, transclude) {
      scope.control = scope.control || {}

      scope.control.openModal = function () {
        scope.instance = $uibModal.open({
          animation: false,
          scope: scope,
          template: '&lt;div&gt;in the template&lt;/div&gt;&lt;div class="content"&gt;&lt;/div&gt;'
        });
        element.find('.content').append(transclude());
      };
    }
  }
});
</code></pre>