title: How to dynamically load the pop-up window in AngularJS?
body: <p>Web project: backend - ASP.NET, frontend - AngularJS.</p>
  
  <p>I have the "main page" with mainApp module.
  Also i have the another page with the registration, which is the responsibility of LoginLayerApp.</p>
  
  <p>What i want: when you click on "main window" i need pop-up window with the registration content (html, css, angularController and so on).</p>
  
  <p>What was tried:</p>
  
  <ol>
  <li>Loaded using JQuery, implement the DOM and call angular.bootstrap by
  hands.</li>
  <li>Loaded via <code>$http</code> and using ngDialog library to open a pop-up
  window.</li>
  <li>Use the iframe.</li>
  </ol>
  
  <p>The problem is that the loaded naked HTML, but I do not know how to inject LoginLayerApp, to then rebuild the naked HTML. I can do it only once, but not as usual, when angular always rebuild view by changes in controller (for example, different ng-class depending on the width of the screen).</p>
  
  <p>How to do the most right? Perhaps I should do differently to organize something?</p>
  
  <p>RequireJS, WebPack will not work, too much legacy-project implementation for such a trifle.</p>
  
  <p>Example of registration page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@using Inventum.ViewModels.Account
  @using Microsoft.Owin.Security
  
  @{
      Layout = null;
  }
  
  &lt;link href="~/Content/css/layers/Login/loginRegistrationLayer.min.css" rel="stylesheet" /&gt;
  
  
  &lt;div ng-app="loginLayerApp"
       ng-controller="loginLayerController as loginCtrl"
       ng-init="init(); returnUrl = '@ViewBag.ReturnUrl'; type = ('@ViewBag.Type' == '') ? 'login' : '@ViewBag.Type'; form={}; user={};"
       esc-key="closeLayer()"
       class="login-app-container"
       tabindex="0"&gt;
      &lt;div class="container" ng-class="{'mobile': !desktop, 'desktop': desktop }" ng-switch on="type"&gt;
  
          &lt;!-- =============== LOGIN =============== --&gt;
          &lt;div class="registration-container" ng-switch-when="login"&gt;
              {{loginCtrl.desktop}}
              {{desktop}}
              &lt;h1&gt;@Html.ClickZone("NewRegLogin.Login.Title")&lt;/h1&gt;
              &lt;div class="main-label"&gt;
                  &lt;span&gt;@Html.ClickZone("NewRegLogin.Login.HelpLabel")&lt;/span&gt;
                  &lt;br ng-show="phoneBreakpoint"&gt;
              &lt;/div&gt;
  
              &lt;!-- ======== Errors block ======== --&gt;
            
              &lt;!-- ======== Errors block ======== --&gt;
  
              &lt;div class="options"&gt;
  
  
                  &lt;ng-form name="form.userForm" ng-class="{'showMe': nosocial &amp;&amp; !desktop}" novalidate enter-key="trySubmit = true; submitForm(form.userForm.$valid, user)"&gt;
                      &lt;!-- &lt;form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate&gt; --&gt;
                      &lt;div class="emailFocusHandler" ng-hide="desktop || nosocial" ng-click="nosocial = true;"&gt;&lt;/div&gt;
                      &lt;div class="group"&gt;
                          
                      &lt;/div&gt;
  
  
                      &lt;div ng-show="desktop || nosocial"&gt;
                          &lt;div class="group"&gt;
  
                          &lt;/div&gt;
  
                          &lt;div class="help-buttons"&gt;
                              
                          &lt;/div&gt;
  
                          &lt;div class="error-block" ng-if="loginFailed &amp;&amp; answerCode == ANSWERS.LOGIN.UserNoutFound"&gt;
                          &lt;/div&gt;
  
                          &lt;button type="submit" ng-click="trySubmit = true; submitForm(form.userForm.$valid, user)"&gt;@Html.ClickZone("NewRegLogin.SignIn") &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/ng-form&gt;
  
                  &lt;div class="delimeter" ng-show="desktop || nosocial"&gt;&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- =============== LOGIN =============== --&gt;
         
  &lt;/div&gt;
  
  
  @section scripts {
      &lt;!-- ANGULARJS --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"&gt;&lt;/script&gt;
  
      @Scripts.Render("~/bundles/js/layer/newLogin")
  
      &lt;script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&amp;render=explicit" async defer&gt;&lt;/script&gt;
  }</code></pre>
  </div>
  </div>
  </p>