title: Transclusion in Angular UI Modal not working
body: <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>