AngularJS - NG-bind-html-inseguro y ng-modelo Problemas

Question

tengo la siguiente línea en mi html:

<div ng-bind-html-unsafe="departmentConfig" class="control-group"></div>

y utilizo un $resource Obtener para recuperar el código HTML, asignar el código HTML para $scope.departmentConfig, y luego la vista se actualiza perfectamente. El HTML que está asignado a $scope.departmentConfig contiene elementos de formulario, con los atributos ng-model, pero cuando cambio los valores en estos elementos de entrada, no actualizan el modelo $scope.

Esto es lo que he tratado, sobre la base de una gran cantidad de otros mensajes de Internet, y que no está funcionando:

$resource('resources/sources/departments/:mappedName', { 
     mappedName:departmentKey 
    }).get(function(departmentConfig) { 
     // This will call another function that will build a chunk of HTML 
     $scope.departmentConfig = $scope.buildDepartmentConfigHtml(departmentConfig); 
     // This is my feeble attempt to access the element, and bootstrap it to include the items in the $scope model. 
     var $departmentConfigContainer = $('#departmentConfig'); 
     angular.bootstrap($departmentConfigContainer, ['sourcemanager']); 

Incluso he visto algunos ejemplos jsFiddle donde esto parece estar funcionando, pero la mía no es ¿Estoy llamando bootstrap demasiado pronto? También he intentado poner un $watch en $scope.departmentConfig así:

$scope.$watch('departmentConfig', function() { 
    var $departmentConfigContainer = $('#departmentConfig'); 
    angular.bootstrap($departmentConfigContainer); 
}); 

pero no funcionó bien. Apuesto a que hay una explicación fácil para esto, simplemente no puedo obtener los elementos de entrada con ng-model que se cargan después de la compilación de la página para vincularse al modelo. Se agradece cualquier ayuda, esta es la última pieza de funcionalidad que necesito para trabajar en mi página. Avíseme si necesita más información sobre mi configuración también.

En pocas palabras, ¿cómo puedo forzar una sección del DOM para volver a compilar después de saber que se ha cargado?

ACTUALIZACIÓN

Aquí es una jsFiddle que indica de qué me gustaría hacer: http://jsfiddle.net/j_snyder/ctyfg/. Notarás que las propiedades dos y tres no actualizan el modelo, y estoy llamando a bootstrap en el div externo, con la esperanza de que incluya aquellos en el enlace del modelo. Esta es la primera vez que publico en jsfiddle, por favor avíseme si no puede ver el ejemplo.

Answer 1

ng-bind-html está hecho para HTML normal, sin compilar elementos angulares nuevos.

Tendrá que utilizar el $compile service.

Así es como editaría su ejemplo actual para trabajar: http://jsfiddle.net/andytjoslin/ctyfg/21/. Pero de esta manera termina siendo malo, porque tienes que hacer la manipulación DOM en tu controlador.

sólo tiene que crear una directiva que básicamente va a hacer lo que quería NG-bind-html para hacer: http://jsfiddle.net/andytjoslin/ctyfg/22/