La situación

Anidada dentro de nuestra aplicación Angular hay una directiva llamada Page, respaldada por un controlador, que contiene un div con un atributo ng-bind-html-unsafe. Esto se asigna a una var. $ Scope llamada 'pageContent'. Esta var se asigna HTML generado dinámicamente de una base de datos. Cuando el usuario pasa a la página siguiente, se crea una llamada a la base de datos y pageContent var se establece en este nuevo HTML, que se representa en pantalla a través de ng-bind-html-unsafe. Aquí está el código:

Directiva de página

angular.module('myApp.directives')
    .directive('myPage', function ($compile) {

        return {
            templateUrl: 'page.html',
            restrict: 'E',
            compile: function compile(element, attrs, transclude) {
                // does nothing currently
                return {
                    pre: function preLink(scope, element, attrs, controller) {
                        // does nothing currently
                    },
                    post: function postLink(scope, element, attrs, controller) {
                        // does nothing currently
                    }
                }
            }
        };
    });

Plantilla de directiva de página ("page.html" de la propiedad templateUrl arriba)

<div ng-controller="PageCtrl" >
   ...
   <!-- dynamic page content written into the div below -->
   <div ng-bind-html-unsafe="pageContent" >
   ...
</div>

Controlador de página

angular.module('myApp')
  .controller('PageCtrl', function ($scope) {

        $scope.pageContent = '';

        $scope.$on( "receivedPageContent", function(event, args) {
            console.log( 'new page content received after DB call' );
            $scope.pageContent = args.htmlStrFromDB;
        });

});

Eso funciona. Vemos el HTML de la página desde la base de datos bien representado en el navegador. Cuando el usuario pasa a la página siguiente, vemos el contenido de la página siguiente, y así sucesivamente. Hasta ahora tan bueno.

El problema

El problema aquí es que queremos tener contenido interactivo dentro del contenido de una página. Por ejemplo, el HTML puede contener una imagen en miniatura donde, cuando el usuario hace clic en él, Angular debería hacer algo increíble, como mostrar una ventana modal emergente. He colocado las llamadas al método Angular (ng-click) en las cadenas HTML de nuestra base de datos, pero, por supuesto, Angular no reconocerá las llamadas al método ni las directivas a menos que analice la cadena HTML, las reconozca y las compile.

En nuestra base de datos

Contenido para la página 1:

<p>Here's a cool pic of a lion. <img src="lion.png" ng-click="doSomethingAwesone('lion', 'showImage')" > Click on him to see a large image.</p>

Contenido para la página 2:

<p>Here's a snake. <img src="snake.png" ng-click="doSomethingAwesone('snake', 'playSound')" >Click to make him hiss.</p>

De vuelta en el controlador de la página, luego agregamos la función $ scope correspondiente:

Controlador de página

$scope.doSomethingAwesome = function( id, action ) {
    console.log( "Going to do " + action + " with "+ id );
}

No puedo averiguar cómo llamar a ese método 'doSomethingAwesome' desde la cadena HTML desde la base de datos. Me doy cuenta de que Angular tiene que analizar la cadena HTML de alguna manera, pero ¿cómo? He leído vagos comentarios sobre el servicio $ compile, y he copiado y pegado algunos ejemplos, pero nada funciona. Además, la mayoría de los ejemplos muestran que el contenido dinámico solo se establece durante la fase de vinculación de la directiva. Queremos que Page permanezca con vida a lo largo de la vida de la aplicación. Constantemente recibe, compila y muestra contenido nuevo a medida que el usuario pasa las páginas.

En un sentido abstracto, supongo que podría decir que estamos tratando de anidar dinámicamente fragmentos de Angular dentro de una aplicación Angular, y necesitamos poder intercambiarlos dentro y fuera.

He leído varias partes de la documentación de Angular varias veces, así como todo tipo de publicaciones de blog, y JS Fiddled con el código de personas. No sé si estoy malinterpretando completamente a Angular, o simplemente me estoy perdiendo algo simple, o tal vez sea lento. En cualquier caso, podría usar algún consejo.