Bind tag name in AngularJs

Question

Bind tag name in AngularJs

I want to bind tag name to variable in AngularJs. Direct way doesn't work:

<div ng-app ng-init="list=['pre', 'div', 'em']">
Check the list: {{list}}
<div data-ng-repeat="item in list">
 {{item}}: <{{item}}>content</{{item}}>
</div>
</div>

How to do it right?

javascript
angularjs

Answer 1

You're going to want to make a Directive and use the $compile service module.

Answer 2

Angular template system works on DOM tree, not on strings, so template must be valid HTML and usage of {{}} for tagname is impossible. We can write own directive for it (see Max answer) or if here is small set of options it can be more easy to use ng-include and set of templates for options.