title: Integrating directive in Angular UI Modal
body: <p>In this <a href="http://plnkr.co/edit/Qs0VonyAzINK7MjMQhji?p=preview" rel="nofollow">plunk</a> I have the following:</p>
  
  <ul>
  <li>A control object shared between the controller and the directive.</li>
  <li>The directive declares a method in the control object.</li>
  <li>The controller invokes the  method to set a value.</li>
  <li>The directive is included in an Angular UI Modal.</li>
  </ul>
  
  <p>For some reason the control object is empty when the modal is opened (look at the console log). How to invoke the method from the controller to set the field value?  </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="myCtl"&gt;
  
          &lt;button ng-click="openModal()"&gt;Open modal&lt;/button&gt;
  
          &lt;script type="text/ng-template" id="myModalContent.html"&gt;
  
              &lt;div class="modal-header"&gt;
                  &lt;h4 class="modal-title"&gt;The Title&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;ddl control="ddlControl"&gt;&lt;/ddl&gt;                
  
              &lt;div class="modal-footer"&gt;
                  &lt;button type="submit"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
  
         &lt;/script&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var app = angular.module('app', ['ui.bootstrap']);
  app.controller('myCtl', function($scope,$uibModal) {
  
          $scope.ddlControl = {};
  
          $scope.openModal = function() {
            $scope.modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                scope: $scope
              }); 
  
            console.log($scope.ddlControl);
            $scope.ddlControl.set();
  
          };
  })
  
  .directive('ddl', function () {
  
      var directive = {};
      directive.restrict = 'EA';
      directive.scope = {
           control: '='
      };
      directive.template = '&lt;div&gt;someValue: {{someValue}}&lt;/div&gt;';
      directive.link = function (scope, element, attrs) {
  
          scope.control = scope.control || {};
  
          scope.control.set = function() {
             scope.someValue = 1;
          };
  
      };
      return directive;
  });
  </code></pre>