JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="AppController">
    <button onclick="addPage()">Add Page</button>
    <pages>
        <page page="StaticPage">
        </page>
    </pages>
</div>

JavaScript

var addPage = function () {
  var page = document.createElement('div');
  var parent = document.getElementsByTagName('pages')[0];

  page.setAttribute('page', 'AddedPage');
  page.setAttribute('ng-controller', 'PageController');
  page.innerHTML = '{{data.name}}';

  parent.appendChild(page);

  var event = new CustomEvent(
      "pageLoaded",
      {
        detail: {
          page: "AddedPage",
          element: page
        },
        bubbles: true,
        cancelable: true
      }
  );

  parent.dispatchEvent(event);
};

var log = function(message){
  var div = document.createElement('div');
  div.innerHTML = message;
  document.body.appendChild(div);
}

var app = angular.module('app', []);

app.controller('AppController', function ($scope) {
  log('App Controller');

  $scope.data = {
    name: 'Data set in AppController'
  }
});

app.controller('PageController', function () {
  log('PageController of newly inserted element');
});

app.directive('page', function () {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
    }
  }
});

app.directive('pages', function ($compile) {
  return {
    restrict: 'E',
    link: function (scope, element) {
      element.on('pageLoaded', function(event){
        var page = event.detail.element;

        scope.data = {
          name: 'DATA SET IN DIRECTIVE'
        };

          scope.$apply(function () {          
        element.replaceWith($compile(page)(scope));
          });
      });
    }
  }
});