Angular ui-date inside of modal

I am using ui-date (https://github.com/angular-ui/ui-date) (which is an angular directive that extends the jquery ui date picker) to create a pop-up date picker when an input is clicked on. The issue, is that it is inside of a $modal window (from angular-ui). When you click on the input box, the div for the date picker is appended to the bottom, just above the closing tag, which is OUTSIDE of the div that contains the $modal. Therefor, when the $modal window is closed (and thus removed from the DOM) the div for the date-picker remains.

I could not find any documentation on either jquery or ui-date that would allow the div to be appended to another element, it seems to be built in.

I am unsure of how this could be solved.

Code during date picking

<body>

<div class="modal"> <!-- This is the modal div which will be created and destroyed -->
<input type="text" class="input-calendar" id="reason_date" name="reason_date" ng-model="effectiveDate" ui-date="DateOptions" date-input-format date-validation required="required" autocomplete="off" />
</div>

<!-- This is where the date-picker div is appended -->
<div class="date-picker"> 
</div>

</body>

After the modal has been closed

<body>

<!-- Modal div has been destroyed upon close -->

<!-- Date picker div was outside of modal div, so it remains -->
<div class="date-picker"> 
</div>

</body>

Hopefully this explains the issue.

Solution

You can hook into the $modal's $destroy event and simply remove the element. So inside the controller for the modal, assuming you've injected $scope:

$scope.$on('$destroy', function () {
  $('.date-picker').remove();
});

Hat-tip to @Gustavo for mentioning remove() in a comment to his answer.

Otherwise, submit a PR to the GitHub for the ui-date project. Modify the following code at line 172:

        $element.on('$destroy', function() {
          $element.datepicker('hide');
          $element.datepicker('destroy');
        });

to add $element.remove(); in the $destroy handler...