jquery - Dynamically add html content with binding in angularjs -

jquery - Dynamically add html content with binding in angularjs -

i have input this:

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

and list placed on scope:

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

i trying run on list using ng-repeat , display list element , have binding between input , 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) { homecoming $sce.trustashtml(html_code); }

what right way so? thanks.

if can avoid using ng-bind-html, improve utilize ng-include templating, here working plunk. 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"} ];

jquery html angularjs web-applications data-binding