Dynamically loaded input box does nothining

Question

Dynamically loaded input box does nothining

So I have some html that gets loaded into the #panel div dynamically depending on which questionNumber the user is on. This is not all of the code but all of the relevant code I think. Anyway, the <input> get's loaded into the page but it doesn't actually do anything. what am I missing here? I have the same problem when the questionNumber === 1, where the binded variables just show up as {{variable}} etc

var readingController = function (scope, Romanize){
        scope.usersRomanization;
        //alert(scope.usersRomanization);
}

var app = angular.module('Tutorials', ['functions', 'tutorials']).controller('getAnswers', function ($scope, $element, Position, Romanize) {
$scope.sectionNumber = Position.sectionNumber;
if ($scope.sectionNumber === 0){
    $('#panel').html('<div ng-controller="readingController"><input ng-model="usersRomanization"></input></div>');
    readingController($scope, Romanize);
}

<body ng-controller="getAnswers">
    <div  id="panel">
    </div>
</body>

angularjs

Answer 1

If you add HTML to the DOM, you have to tell Angular to $compile it. This should be done in a directive. You'll need to inject $compile then do something like this:

var content = '<div ng-controller=...></div>';
var compiled = $compile(content)(scope);
// then put the content where you want

Or better, define a directive and use a template, which will automatically get compiled for you by Angular.

Other alternatives are ng-include (which will compile the loaded content for you) and ng-switch, which would allow you to put the templates into the HTML.