How to keep track of an ng model created using ng-bind-html

Question

I need help with an ng model created using ng-bind-html. I have a JSON file on the server in which I have html and some inputs like this:

*. Json

{ "test": { "1": { "question":"<span>1. something:</span>", "options":"<input type='radio' name='q1' ng-model='q.1' value='a'>a) op 1<br><input type='radio' name='q1' ng-model='q.1' value='b'>b) op 2<br><input type='radio' name='q1' ng-model='q.1' value='c'>c) op 3<br><input type='radio' name='q1' ng-model='q.1' value='d'>d) op 4<br><input type='radio' name='q1' ng-model='q.1' value='e'>e) op 5<br>", "answer":"c" }, "2": { ... } } } 

Then in my HTML file I have something like:

 <div class="testContent"> <div class="test"> <div class="questions" ng-repeat="qs in questions" ng-show="questions.length"> <div ng-bind-html="qs.question"></div> <div class="options" ng-bind-html="qs.options"> </div> </div> </div> <br> <div class="nextBtn"> <a href="#test/6" class="btn btnNext" ng-click="save()"> continue ></a> </div> </div> 

And in my Angular controller, I have an ajax call for the JSON file:

:

 .controller('testCtrl', ['$scope', '$http', 'myService', '$sce', function($scope, $http, myService, $sce, ){ $http.get(urls.url_otis).success(function(data, status){ angular.forEach(data.test, function(value, key){ var q = data.test[key]; q[key] = key; q.question = $sce.trustAsHtml(q.question); q.options = $sce.trustAsHtml(q.options); $scope.questions.push(q); }); }).error(function(data, status){console.log(status)}); } 

Html fills up, but I can't use $ watch for the model (q) generated using this approach.

How can I look at changes in models created this way?

Thanks in advance...

Answer 1

You need to compile dynamically created elements to tell angular about them.

A directive that can do this might look like this:

 app.directive('compile',function($compile, $timeout){ return{ restrict:'A', link: function(scope,elem,attrs){ $timeout(function(){ $compile(elem.contents())(scope); }); } }; }); 

$timeout used to run the compilation function, after ng-bind-html does its job.

Now you can just put compile as a div attribute with ng-bind-html :

 <div class="questions" ng-repeat="item in questions" ng-show="questions.length" > <div ng-bind-html="item.question"></div> <div compile class="options" ng-bind-html="item.options"></div> </div> 

Fiddle: http://jsfiddle.net/nZ89y/7/

Answer 2

JavaScript:

 app.controller('demoController', function($rootScope, $scope, $http, $compile){ var arr = [ '<div>I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em></div>' ,'<div>name: <input ng-model="user.name" /></div>' ,'<div>age: <input ng-model="user.age" /></div>']; $scope.user={}; $scope.testChange2 = function(){ var compileFn = $compile( arr[Number.parseInt(Math.random()*10)%3] ); var $dom = compileFn($scope); $('#test').html($dom); }; }); 

HTML:

 <div ng-controller="demoController"> <button type="button" class="btn w-xs btn-info" ng-click="testChange2();" >test2</button> <hr/> <div id = "test"></div> <hr/> <div>user:{{user}}</div>