javascript - DOM に追加された新しい要素で ng-model を使用する

Question

いくつかの入力テキストボックスを div に追加する角度コードがあります。新しく作成されたテキストボックスに ng-module="..." を追加したいのですが、そうするとAngularによってモデルとして登録されないようです。

基本的に、実行時にこれらの入力ボックスを作成し、それらに ng-model 属性を与えてから、モデルを含む div を作成しようとしています:

<input type="text" ng-model="placeholder_name" />
....
<div id="content">{{placeholder_name}}</div>

app.js

var ViewCtrl = function($scope, $location, $routeParams, Template) {
    var id = $routeParams.templateId;
    var template = Template.get({id: id}, function(res) {
        $scope.template = template;
    });

    /*** Template placeholders ***/
    $scope.updatePlaceholders = function () {
        var placeholders = [];
        var content = template.content;

        // get placeholders that match patter
        var match = content.match(/{([A-z0-9]+)}/gmi);

        // if there are placeholders
        if (match !== null) {
            // foreach placeholder
            for (var i = match.length - 1; i >= 0; i--) {
                // strip braces
                var holder = match[i].replace(/(}|{)/g, '');
                // add to placeholders array
                placeholders.push(holder);
            }
        }

        // remove duplicates
        $scope.placeholders = $.unique(placeholders);

        // now go through each placeholder in content box and replace with {{model}}.
        for (var k = 0; k < placeholders.length; k++) {
            var placeholder_new = '<span class="placeholder placeholder-' + placeholders[k] + '">{{' + placeholders[k] + '}}</span>';
            var regex = new RegExp("{" + placeholders[k] + "}", "g");
            var new_content = $scope.template.content.replace(regex, placeholder_new);
            $scope.template.content = new_content;
        }
    }
}

view.html

<h2>Template: {{template.title}}</h2>
<div class="well well-small">
    <p><strong>Placeholders</strong></p>
    <div class="placeholder-list">
        <span ng-repeat="placeholder in placeholders">  
            <input type="text" class="span2 placeholder" ng-model="placeholder_{{placeholder}}" value="{{placeholder}}" />
            <span ng-show=" ! $last ">&nbsp;</span>
        </span>
    </div>
</div>
<div contenteditable="true" id="content" ng-bind-html="template.content"></div>

アイデアは、私の template.content には次のようなテキストが含まれているということです:

Look! {this} is a placeholder.

{...} のすべてのインスタンスを見つけて、それらの入力ボックスを作成します。次に、{...} を<span>{{<model>}}</span>、tet ボックスの値を変更したときにコンテンツの変更にまたがるという考えに置き換えます。

この行はエラーをスローしています。ng-model の作成方法が気に入らない:

<input type="text" class="span2 placeholder" ng-model="placeholder_{{placeholder}}" value="{{placeholder}}" />

エラー: 構文エラー: トークン '{' は、[{{placeholder}}] で始まる式 [placeholder_{{placeholder}}] の列 13 にある予期しないトークンです。