javascript - Setting angular directive name via model value -

i've got loop based on value, need specify particular directive. here i've got:

<div ng-repeat="w in row.widgets" class="col-md-{{12/row.widgets.length}}">                     <{{w.type}}>                     </{{w.type}}>                 </div> 

the thing is, i've got matching directives setup rather call directive, markup output simply

<widget-directive-one> <widget-directive-two> <widget-directive-three> 

i don't understand why rather output actual value, won't call upon directive of same name. advice appreciated!

attribute names , tag names can't dynamically generated in dom (views).

angular needs able parse elements in dom , compare existing tag names or attributes directives

there numerous ways approach ... ng-switch , ng-if or custom directive returns directive tag want several examples