Remove Angular UI Bootstrap datepicker popup rendered to body
<p>I'm using Angular UI Bootstrap datepicker popup with the option <code>datepicker-append-to-body="true"</code>. Thus the popup is rendered to the <code>&lt;body&gt;</code>. 
In my particular scenario I need to remove the DOM element containing the datepicker. Once the element is removed (with <code>element.remove()</code>) the popup stays in the body.
How should I remove the datepicker, so that popup will be also properly removed?</p>

<p>Here is the plunker demonstrating the issue:
<a href="http://plnkr.co/edit/zFew72PpY0E2ETwMKRpv?p=preview" rel="nofollow">http://plnkr.co/edit/zFew72PpY0E2ETwMKRpv?p=preview</a></p>

<p>I know that removing an element like this in Angular is not the right way, but I'm working on integration of existing jQuery widget with Angular, and this is done in the existing code. I'm trying to find a way to fix this.</p>

<p>Any help is appreciated.</p>

<p><strong>Edit</strong></p>

<p>Sorry, I believe some additional info is needed to clarify the case:</p>

<p>As I mentioned, I integrate a jQuery plugin with Angular. This is grid.
Grid can have editing row. Grid user can put a Angular UI Datepicker in the editing row to edit date field. Once a user clicks <code>Save</code> (or <code>Cancel</code>), the editing row is removed with <code>$element.remove()</code>. So this happens in the external lib code. What I can do, is to patch removing code and call some cleaning up code. The question is what this cleaning up code could be, so it will clean up the datepicker.</p>

<p><code>ng-if</code>, unfortunately, is not an option, because patching code knows nothing about the content of the cell and fields of the scope. This code is generic, while datepicker is put in the cell by grid user. In fact it could be any other widget.</p>