title: How do you use angularjs upgraded components within an ngx-bootstrap Modal?
body: <p>I have a hybrid Angular app (Angular 8.2.14 and angularjs 1.8.0) that uses Valor Software's ngx-bootstrap (5.3.2) modals. I still have several components that are angularjs and are complicated enough that I can't just upgrade them real quick.</p>
  <p>I have properly bootstrapped my app so that typically upgraded and downgraded components work as expected. There is one case that where this does not happen and I think it is because of how ngx-bootstrap's BsModalService creates components.</p>
  <p>Given an Angular component TestModal with a definition like so:</p>
  <pre><code>@Component({ template: `
    &lt;ng1-component [html]=&quot;ng1HtmlContent&quot;&gt;&lt;/ng1-component&gt;
  ` })
  export class TestModal {
    public ng1HtmlContent: string;
  }
  </code></pre>
  <p>And an angularjs component like so:</p>
  <pre><code>angular.
    module('common').
    directive('ng1Componnent', ng1Component);
  
  ng1Component.$inject = ['$compile'];
  function ng1Component ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '&lt;'
      },
      template: '&lt;div&gt;&lt;/div&gt;',
      link: function ng1Component (scope, elem) {
        let childScope = null;
  
        scope.$watch('html', (html) =&gt; { 
          if (childScope) {
            childScope.$destroy();
          }
  
          childScope = scope.$new();
          // There is a lot more here I am just not including.
  
        });
    }
  }
  </code></pre>
  <p>The modal is shown with code similar to this:</p>
  <pre><code>constructor(private readonly bsModalService: BsModalService) {}
  
  public showTest(initialState: Partial&lt;TestModal&gt;): void {
    this.bsModalService.show(TestModal, { initialState });
  }
  </code></pre>
  <p>If I place my ng1Component directly into the DOM instead of within a modal, the component is rendered as you'd expect. However, if use the ng1Component in the modal I get this error:</p>
  <pre><code>ERROR NullInjectorError: StaticInjectorError(AppModule)[$scope]: 
    StaticInjectorError(Platform: core)[$scope]: 
      NullInjectorError: No provider for $scope!
  </code></pre>
  <p>Apparently, the modal code is not getting inserted into the DOM in a place where the properly bootstrapped ng1Injector can provide a scope.</p>
  <p>Has anyone else overcome this issue? If so, how did you go about it?</p>