How to bind an AngularJS controller to dynamically added HTML?

Question

For this scenario, I have a page of HTML with some AngularJS directives, controllers, etc.

Something like this:

Answer 1

I followed this process and it worked for me:

// Some variables
var $controllerElement = angular.element('css-selector-to-the-controller-element');
var $appElement = angular.element('css-selector-to-ng-app-element');

// compiling and applying / digesting the scope.
$appElement.injector().invoke(function($compile) {
    var scope = $controllerElement.scope();
    $compile($controllerElement)(scope);
    scope.$apply();
});

Reference: Angular.injector