Как вставить DOM-элемент

[Shurup312]

Строю форму редактирования записи.
Мне с сервера приходит json в котором есть данные типа
[{"title":"...","value":"...","type":"..."},
{"title":"...","value":"...","type":"..."},
{"title":"...","value":"...","type":"..."}]

То есть я теперь для каждого параметра буду строить строку, в которой я слева укажу название, далее в зависимости от параметра type будут разные визуальные элементы, типа select, input и т.д.

Шаблон сделал таким
<tr ng-repeat="item in data">
<td>{{item.title}}</td>
<td>{{prepareElement(item)}}</td>
</tr>

Ну и думал просто сделаю в prepareElement то-то типа
return document.createElement(type);
А не тут то было, он мне в шаблон потом вставляет JSON какой-то.

Так как же мне сделать, чтобы он в шаблон вставил тот элемент визуальный, который я создал?
Я думаю вопрос не нов, но не смог найти решения.

Заранее спасибо.

[dolpheen]

Разработчики ангуляра рекомендуют манипулировать DOMом из директив, прилагаю два варианта (второй предпочтительней, возможность использовать директивные templates, scope, compile и т.д.)

Вариант 1. Создание элемента в контроллере

<tr ng-controller="theController" ng-repeat="i in data">
			<td>{{i.title}}</td>
			<td></td>
		</tr>

controller('theController', ['$scope', '$element', function ($scope, $element) {
        console.dir($element);
        $scope.$watch('i.type', function(){
            $element.children().eq(1).html('<'+$scope.i.type+'></'+$scope.i.type+'>');
        });
    }])

Вариант 2. Создание элемента в директиве

<tr ng-repeat="i in data">
			<td>{{i.title}}</td>
			<td my-type></td>
		</tr>

directive('myType', function () {
        return {
            link: function (scope, elem, attr){
                elem.html('<'+scope.i.type+'></'+scope.i.type+'>')
            }
        }
    });

http://plnkr.co/edit/F56dqTONB4kgsImdIXhO?p=preview

[nerv_]

Вариант 1. Создание элемента в контроллере

является анти-паттерном