Dynamically generate angular directive within a loop - angularjs

Question

I'm trying to dynamically compile and append a directive with a dynamic attribute in the directive; however, I keep getting an error.
Anyone know why?
http://plnkr.co/edit/wOb9UuFwXR0dCZx2e2xg?p=preview
angular.module('plunker', [])
.controller('MainCtrl', function($scope) {
var vm = this;
vm.foo = {
bar: 'world'
};
}).directive('addEditConfig', AddEditConfig)
.directive('inputElement', InputElement);
function AddEditConfig($compile) {
var directive = {
restrict: 'E',
scope: {
edit: '#',
config: '=',
display: '=',
parentController: '='
},
template: '<div id="dynamicForm"></div>',
controllerAs: 'vm',
bindToController: true,
controller: AddEditConfigController,
link: linkFunction
}
return directive;
function linkFunction(scope, element, attr, ctrl) {
var params = [{description: 'foo', value:'bar'}, {description: 'foo', value:'bar'}, {description: 'foo', value:'bar'}, {description: 'foo', value:'bar'}];
for (var i = 0; i < params.length; i++) {
angular.element(document.getElementById('dynamicForm')).append($compile('<input-element param="' + params[i] + '"></input-element>')(scope));
}
}
};
function AddEditConfigController() {
};
function InputElement() {
var directive = {
restrict: 'E',
scope: {
param: '='
},
controllerAs: 'vm',
bindToController: true,
template: '<div class="form-group"> <div class="col-md-8"> <input id="port" name="textinput" type="text" placeholder="{{vm.param.description}}" class="form-control input-md" ng-model="vm.param.value"/> </div></div>',
controller: InputElementController,
link: linkFunction
}
return directive;
function linkFunction(scope, el, attr, ctrl) {
}
};
function InputElementController() {
var vm = this;
}

Answer 1

The problem (at least one of them) is in this statement :
angular.element(document.getElementById('dynamicForm')).append($compile('<input-element param="' + params[i] + '"></input-element>')(scope));
Writing this param="' + params[i] + '" generates the following DOM param="[Object Object]".
So It will never work as expected.
One way to achieve this :
angular.module('plunker', [])
.controller('MainCtrl', function($scope) {
var vm = this;
vm.foo = {
bar: 'world'
};
}).directive('addEditConfig', AddEditConfig)
.directive('inputElement', InputElement);
function AddEditConfig($compile) {
var directive = {
restrict: 'E',
scope: {
edit: '#',
config: '=',
display: '=',
parentController: '='
},
template: '<div id="dynamicForm"><input-element param="param" ng-repeat="param in vm.params"></input-element></div>',
controllerAs: 'vm',
controller: AddEditConfigController
}
return directive;
};
function AddEditConfigController() {
this.params = [{description: 'foo', value:'bar'}, {description: 'foo1', value:'bar1'}, {description: 'foo2', value:'bar2'}, {description: 'foo3', value:''}];
};
function InputElement() {
var directive = {
restrict: 'E',
scope: {
param: '='
},
template: '<div class="form-group"> <div class="col-md-8"> <input id="port" name="textinput" type="text" placeholder="{{param.description}}" class="form-control input-md" ng-model="param.value"/> </div></div>'
}
return directive;
};
http://plnkr.co/edit/KdPvJdBsRwbjNsBCIvVh?p=preview