Dynamic Tag Generation in Angular - angularjs

Question

I am trying to dynamically generate a form using an array that contains a bunch of directive names
$scope.components = ["textbox", "textbox", "radio", "checkbox", "label"];
I want to generate tags with these names using angular. For example
<textbox></textbox>
<textbox></textbox>
<radio></radio>
<checkbox></checkbox>
<label></label>
<--THE FOLLOWING DOESN'T WORK BUT WOULD BE COOL IF IT DID-->
<{{component}} ng-repeat="component in components track by $index"></{{component}}>
Right now as an alternative I do the following
<div ng-include="component + '.html'" ng-repeat="component in components track by $index"></div>
Which basically does what the directive would do with the templateUrl parameter. Should I
make a directive that generates tags
continue using ng-include as I am
use another method

Answer 1

You can't generate tag of elements dynamically using only angular expressions. However you can create a custom directive to do that work for you.
Proof of concept: (Demo: inspect DOM tree to see generated elements)
angular.module('MyModule').directive('dynamicTag', function($compile) {
return {
restrict: 'E',
scope: {
components: '&components'
},
link: function($scope, $element) {
var components = angular.isFunction($scope.components) ? $scope.components() : [];
var domElements = [];
angular.forEach(components, function(c) {
var domElement = document.createElement(c);
$compile(domElement)($scope);
domElements.push(domElement);
});
$element.replaceWith(domElements);
}
};
});
HTML
<dynamic-tag components="components"></dynamic-tag>
being components an array of strings in the scope as in your question:
$scope.components = ['textbox', 'radio', 'checkbox', 'label'];