Angular-UI datepicker doesn't work within a di

Question

I have an issue that I believe is related to the isolate scope of my directive.

The Angular-UI popup date picker will not appear again in the directive once a date has been selected from the popup.

Outside the directive, the pop up continues to function correctly even when a date has been selected.

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.

By having the same markup and is-open property, we see the popup appear outside the blob when the calendar icon is clicked inside the blob, so the open 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.

Markup:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<meta name="description" content="Directive Scope" />

  <h1>Directive scope testing</h1>

  <div ng-app="testApp" ng-controller="TestCtrl">
    <blob show="isVisible">
      This is the content. We need in the blob directive, <em>unrelated to the issue being demonstrated</em>.
      <br/>dt in blob scope: {{dt}}
      <hr>
      <input type="text" datepicker-popup="d MMM yyyy" ng-model="$parent.dt" is-open="opened" />
      <button type="button" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </blob>

    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

    <h3>Outside the dialog</h3>
    <input type="text" datepicker-popup="d MMM yyyy" ng-model="dt" is-open="opened" />
    <button type="button" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>


  </div>

Javascript:

var app = angular.module("testApp", ['ui.bootstrap']);

app.directive("blob", function(){
  return {
    restrict: "E",
    scope: {
      show:'='
    },
    transclude: true,
    template: '<div ng-show="show"><input type="text" ng-model="test"><br/>{{test}}</div><div ng-transclude></div>'
  };
});

app.controller("TestCtrl", function($scope) {
  $scope.isVisible = true;

  $scope.open = function($event){
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };
});

Working demo: http://jsbin.com/viqem/5

How can I get the datepicker popup to work consistently inside the blob directive?

Answer 1

The solution, which I'm putting here in the hope it'll help someone else, was to also refer to the parent scope in the is-open attribute:

 ng-model="$parent.dt" is-open="opened" />

became

 ng-model="$parent.dt" is-open="$parent.opened" />