Angular ng-model don't work

Question

I'm trying to replace specific string in my text with inputs with ng-models. I used following code:

inlinetext.replace(buffer[x], '<input ng-model="singleQuestion.inlines[' + x + '].checkAnswer" type="text">');

It render HTML input field in view as expected:

<input ng-model="singleQuestion.inlines[0].checkAnswer" type="text">

But ng-model won't update model. I've actually tried to hard-code the same piece of code in HTML view and it worked perfectly. So it must be something in way how angular render view.

My goal is to display text paragraph where are specific words replaced with inputs (with ng-model property). Problem is that Angular doesn't compile anything that you put in view through .replace() function.

Does anybody have some idea how to do that?

Answer 1

Finally I've figured it out right way. Here is complete code for replace string with Angular compiled element in case anyone needed it.

<script>
  var testApp = angular.module('testApp', []);

  testApp.directive('dynamic', function ($compile) {
    return {
      restrict: 'A',
      replace: true,
      link: function (scope, ele, attrs) {
        scope.$watch(attrs.dynamic, function(html) {
          ele.html(html);
          $compile(ele.contents())(scope);
        });
      }
    };
  });

  testApp.controller('PhoneListCtrl', function ($scope) {

  // Initializace text
  var inlinetext = 'Lorem ipsum dolor form sit amet, consectetur adipiscing elit. Vivamus in form ultricies ipsum. Quisque finibus lacus neque, sed tempor lectus form gravida nec. Nam egestas dui vel elit lacini';

  // Replace string and bind it to directive
  $scope.html = inlinetext.replace('form', '<input type="text" ng-model="demo">');
});
</script>

This is the result