Creating a wrapper directive for Bootstrap-UI's uib-datepicker-popup
<p>I'm trying to create a wrapper AngularJS directive for Bootstrap-UI's uib-datepicker-popup so I don't have to recreate a bunch of boilerplate each time I need to select a date. <a href="https://stackoverflow.com/questions/29562213/how-to-create-an-angularjs-wrapper-directive-for-a-ui-bootstrap-datepicker">I've been working off an example I found here</a> which was written for an earlier version of Angular, and am running into some oddities getting this working.</p>

<p>I've gotten the directive to a point where it displays a popup, however the two-way data binding seems to be broken; the date value in the field's model doesn't propagate into the directive, and when you click on the popup and select a date, it doesn't propagate back out. Does anyone have any ideas on what's going on here?</p>

<p><a href="https://plnkr.co/edit/swVZlQ2SYJMRvU9xx74P?p=preview" rel="nofollow noreferrer">I've created a Plunker demonstrating the issue here.</a></p>

<p>Directive code:</p>

<pre><code>app.directive('myDatepicker', function() {
  return {
      restrict: 'E',
      scope: {
          model: "=",
          myid: "@"
      },
      templateUrl: 'datepicker.html',
      require: 'ngModel',
      link: function(scope, element) {
          scope.popupOpen = false;
          scope.openPopup = function($event) {
              $event.preventDefault();
              $event.stopPropagation();
              scope.popupOpen = true;
          };

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

      }
  };
});
</code></pre>

<p>Template code:</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
        &lt;p class="input-group"&gt;
          &lt;input type="text" class="form-control" id="{{myid}}" uib-datepicker-popup ng-model="model" is-open="opened" ng-required="true"  /&gt;
          &lt;span class="input-group-btn"&gt;
            &lt;button type="button" class="btn btn-default" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/span&gt;
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt; 
</code></pre>