How to dynamically load a popup window in AngularJS?

Question

Angular

There is a web project: backend - asp.net, frontend - angularjs.
There is a page for which the mainApp module is responsible.
There is a page with registration, for which LoginLayerApp is responsible.
What you want: when you click on the button, a registration window pops up.
What I tried:
1.) Load with JQuery and inject into DOM.
2.) Load via $http in AngularJS and use the ngDialog library to open a popup window.
3.) Inject into an iframe
The problem is that the raw HTML is being loaded, but I don't know how to "inject" the LoginLayerApp to then recompile that raw HTML loaded.
How to do it most correctly? Maybe it should be organized in a different way?
RequireJS or WebPack will not work, too large a legacy project to implement for the sake of such a trifle.

Answer 1

And why don't you want to use the regular features of AngularJs (specify templateUrl: 'path' in the component/directive)?
If you don't want to, you need to call $compile for the loaded DOM chunk.

Answer 2

everything is simple. when clicked, open a piece of the house

<button ng-click="i.show=1">button</button>
<span class="elem_list--descr--footer--item foot1"
                                  ng-if="i.show==1">
                                <i class="icon clock"></i>
                                <span>{{::i.remain}}</span>&thinsp;{{::i._remain}}&nbsp;осталось
                            </span>

instead of span, use a modal window. plus you can look at ng-bind-html paired with $sce.trustAsHtml