Angularjs : Data binding with HTML generated from a variable - html

Question

I already apologize for asking, just beginning with angularjs (and client-side dev) and I am trying to do something pretty simple which does not work.
I have some HTML that I want to generate from a variable. This html contains a ng-model directive that I want to bind with some data. Basically if I put directly the html inside the html file, data binding works fine:
HTML
<form role="form" ng-submit="search()" ng-controller="AppController">
<div class="form-group">
<label for="search__origin">Departure</label>
<input type="text" class="form-control" id="search__origin" ng-model="routes[0].origin" /> {{routes[0].origin}}
</div>
</form>
Anjularjs
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.routes = {}
var route_format = {
origin: 'SG',
departure_date: new Date(),
return_date: new Date()
};
$scope.routes['0'] = route
})
Fiddle here
But if I put my HTML (containing a "ng-model" directive) into a $scope variable, then use "ng-bind-html" directive to generate the html directly into the html template, then data binding does not work:
HTML
<form role="form" ng-submit="search()" ng-controller="AppController">
<div class="form-group">
<label for="search__origin">Departure</label>
<div ng-bind-html=myhtml class="form-group"></div>
{{routes[0].origin}}
</div>
</form>
angularjs
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope,$sce) {
$scope.routes = {}
var route_format = {
origin: 'SG',
departure_date: new Date(),
return_date: new Date()
};
$scope.routes['0'] = route_format;
var html = '<input type="text" class="form-control" id="search__origin" ng-model="routes[0].origin"/>'
var getTrustedHtml = function(unsafe_html) {
var x = $sce.trustAsHtml(unsafe_html);
return x;
}
$scope.myhtml = getTrustedHtml(html);
})
Fiddle here
I am wondering here why it does not work, is it because I process in the wrong order and that when the html is generated on the page, the relation with the $scope variable cannot be done?
I would appreciate some help here :), thanks in advance!
Al

Answer 1

ng-bind-html will not compile directives for you.
you need either use $compile service and compile this fragment yourself that is ugly
or
restructure the code not to have directives inside ng-bind

Answer 2

Thanks STEVER for giving me the hint, appreciated!
I have solved my issue using the directive 'ng-include' and creating a html template. It also allows me to iterate ('ng-repeat') over this html template with dynamic 'ng-model's as below:
HTML
<form role="form" ng-submit="search()" ng-controller="AppController">
<div class="form-group">
<div ng-repeat="i in range(route_nb) track by $index">
<div ng-include="'test.html'"></div>
</div>
</div>
{{routes[0].origin}}
{{routes[1].origin}}
</form>
<script type="text/ng-template" id="test.html">
<div class="form-group">
<label for="search__origin">Departure</label>
<input type="text" class="form-control" id="search__origin" ng-model="routes[$index].origin" />
</div>
</script>
jsangular
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.routes = {};
$scope.route_nb = 2;
$scope.routes['0'] = {
origin: 'SG',
departure_date: new Date(),
return_date: new Date()
};
$scope.routes['1'] = {
origin: 'LON',
departure_date: new Date(),
return_date: new Date()
};
$scope.range = function(n) {
return new Array(n);
};
})
Fiddle
However I am wondering whether it is really efficient in term of performances...