title: Angular-UI datepicker doesn't work within a directive with isolate scope
body: <p>I have an issue that I believe is related to the isolate scope of my directive.</p>
  
  <p>The Angular-UI popup date picker will not appear again in the directive once a date has been selected from the popup.</p>
  
  <p>Outside the directive, the pop up continues to function correctly even when a date has been selected.</p>
  
  <p>For demonstration purposes, I've used the exact same markup and property for displaying the popup so that the two will influence each other. The same [broken] behaviour in the blob directive can be seen even if the popup and date picker outside the blob are removed.</p>
  
  <p>By having the same markup and <code>is-open</code> property, we see the popup appear outside the blob when the calendar icon is clicked inside the blob, so the <code>open</code> function appears to be working correctly. It seems the popup in the dialog cannot be re-created once it has been dismissed by selecting a date.</p>
  
  <h3>Markup:</h3>
  
  <pre><code>&lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;
  &lt;meta name="description" content="Directive Scope" /&gt;
  
    &lt;h1&gt;Directive scope testing&lt;/h1&gt;
  
    &lt;div ng-app="testApp" ng-controller="TestCtrl"&gt;
      &lt;blob show="isVisible"&gt;
        This is the content. We need in the blob directive, &lt;em&gt;unrelated to the issue being demonstrated&lt;/em&gt;.
        &lt;br/&gt;dt in blob scope: {{dt}}
        &lt;hr&gt;
        &lt;input type="text" datepicker-popup="d MMM yyyy" ng-model="$parent.dt" is-open="opened" /&gt;
        &lt;button type="button" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/blob&gt;
  
      &lt;pre&gt;Selected date is: &lt;em&gt;{{dt | date:'fullDate' }}&lt;/em&gt;&lt;/pre&gt;
  
      &lt;h3&gt;Outside the dialog&lt;/h3&gt;
      &lt;input type="text" datepicker-popup="d MMM yyyy" ng-model="dt" is-open="opened" /&gt;
      &lt;button type="button" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
  
  
    &lt;/div&gt;
  </code></pre>
  
  <h3>Javascript:</h3>
  
  <pre><code>var app = angular.module("testApp", ['ui.bootstrap']);
  
  app.directive("blob", function(){
    return {
      restrict: "E",
      scope: {
        show:'='
      },
      transclude: true,
      template: '&lt;div ng-show="show"&gt;&lt;input type="text" ng-model="test"&gt;&lt;br/&gt;{{test}}&lt;/div&gt;&lt;div ng-transclude&gt;&lt;/div&gt;'
    };
  });
  
  app.controller("TestCtrl", function($scope) {
    $scope.isVisible = true;
  
    $scope.open = function($event){
      $event.preventDefault();
      $event.stopPropagation();
  
      $scope.opened = true;
    };
  });
  </code></pre>
  
  <p>Working demo: <a href="http://jsbin.com/viqem/5" rel="nofollow">http://jsbin.com/viqem/5</a></p>
  
  <p>How can I get the datepicker popup to work consistently inside the <code>blob</code> directive?</p>