Dynamic html with angular bindings not working

Question

I have a simple javascript code that dynamically adds HTML content to a div tag.

function addData(id,title,title_data){

  var htmlcode='';

  htmlcode+=`<h1> Title: `+title+` </h1> <div ng-app="">
              <input ng-model="model`+title+id`" ng-init="model`+title+id+'='+\'`+title_data+`\'`"    >`+


`<p ng-bind="model`+title+id`"> </p>`;



   return htmlcode;
}

Then i simply use it like this:

$('#someDiv').html(addData(1,'Some Title','Some title data'));

The html works well and displays the desired dynamic content. But the angular bindings didn't work. The copy pasted version of the rendered html from web browser works well including the bindings but the dynamic one does not. What seems to be the problem?

Answer 1

You are not using the ng-app name in the declared dynamic html code.