Dynamically add html content with binding in angularjs

Question

I have an Input like this:

<input type="text" ng-model="name">

and a list which is placed on the scope:

$scope.list = ["<span>{{name}}</span>","<span>{{name2}}</span>"]

I am trying to run over the list using ng-repeat and display all the list element and have a binding between the input and the span content.

<div ng-repeat="item in list" ng-bind-html-unsafe="item">
                    <span>{{$index + 1}}.</span>
                    <span ng-bind-html="to_trusted(item)"></span>
                </div>

Where:

$scope.to_trusted = function(html_code) {
        return $sce.trustAsHtml(html_code);
    }

What is the right way to do so? Thanks.

Answer 1

if you can avoid to using ng-bind-html, you better use ng-include for templating, here working plunk.
Like here:

html

<div ng-repeat="item in list" >
         ...//other things
        <span ng-include="'t1'"  ></span>
    </div>

template

<script id="t1" type="text/ng-template">
      <span>{{item.name}}</span>
    </script>

controller

$scope.list = [
      {name:"name1"},
      {name:"name2"},
      {name:"name3"}
      ];