AngularJS: How to dynamically connect a directive?

Question

Angular

Good day!
The essence of the problem is as follows:
Information is loaded into modal windows using AJAX. I want to send the name of the directive to the controller by clicking on an element from the list. In the modal window that is being created, I assign the value of this directive to the element class, but the window opens empty. If you pre-register the name of the directive in the class, then the window will come filled. I searched for information, everywhere it is written about $compile, but I don’t understand how to attach it. In addition, everywhere in the examples everything is written in hardcode, all html is directly in the directive, and I want all html to be in html files, and JS to be JS.
I call the function of opening the modal window:

<span data-ng-click=showWindow("taxistoTablets")>Планшеты</span>

The controller that creates the modal window. pageName - the value of the name of the directive I am passing

arm.controller("armController", function ($scope,$rootScope) {
    $scope.jqxWindowSettings = {
      maxHeight: 1000,
      maxWidth: 1000,
      minHeight: 350,
      minWidth: 350,
      height: 200,
      width: 200,
      resizable: true,
      isModal: false,
      autoOpen: false,
      collapsed: true,
      modalOpacity: 0
    };
    // show button click handler.
    $scope.showWindow = function (pageName) {
      $rootScope.jqxWindowSettings.apply('open');
      $rootScope.pageName = pageName;
    };
    // Ok button click handler.
    $scope.Ok = function () {
      $rootScope.jqxWindowSettings.apply('close');
    };
    // cancel button click handler.
    $scope.Cancel = function () {
      $rootScope.jqxWindowSettings.apply('close');
    };
    });
  });

The directive that should be included in this case is:

arm.directive("tablets", function () {
    return {
      controller: "getInfo",
      restrict: 'CA',
      templateUrl: 'tablets/info-description.html',
      scope: {
      },

      link: function ($scope, element, attributes) {
        $scope.formName = 'Планшеты';
      }
    }
  });

The code of the modal window, the class through which the directive should be connected is substituted, but it is connected only if I write it in advance, manually. Dynamically does not want to work.

<jqx-window jqx-settings="jqxWindowSettings">
  <div>
    {{formName}}
  </div>
  <div>
    <div data-ng-controller="armController" id="modalWindowBody">
      <div data-ng-controller="getInfo">
        <div class="{{pageName}}"></div>
      </div>
    </div>
    <div>
      <div style="float: right; margin-top: 15px;">
        <jqx-button data-ng-click="Ok()" style="margin-right: 10px">Ok</jqx-button>
        <jqx-button data-ng-click="Cancel()">Cancel</jqx-button>
      </div>
    </div>
  </div>
</jqx-window>

Answer 1

Apparently, in my case, only the "bad option" is possible - $compile.
No matter how I tried to adapt the directive to my homeland in a different way, nothing came of it.
With the help of the official docks, I did the following:
Module declaration

var arm = angular.module("arm", ["jqwidgets"], function($compileProvider) {
  $compileProvider.directive('compile', function($compile) {
    return function(scope,element,attrs) {
      scope.$watch(
        function(scope){
          return scope.$eval(attrs.compile);
        },
        function (value) {
          element.html(value);
          $compile(element.contents())(scope);
        }
      );
    };
  });
});

In the controller that creates the jqxwindow, define the html:

$scope.showWindow = function (pageName) {
      $rootScope.jqxWindowSettings.apply('open');
      $rootScope.html = ('<div class="' + pageName + '"></div>');
};

After that, the necessary directives began to be dynamically loaded in my modal window, depending on the pageName value.
I think that the above code can still be combed for more beauty, I haven’t done it yet and I don’t really understand how it works .. But it works :)

Answer 2

first (correct) option: Use the standard angular routing mechanisms to load such templates. Then there will be no problem.
second (bad) option: use the $compile
service third (something in between the first and second): use ng-include .