Manual creation of nodes and ng-model - angularjs

Question

In more attempts to DRY bootstrap and AngularJS, I'm attempting to create a form and children while maintaining the ng-model relationships. I'm getting the correct HTML output, but something isn't connecting correctly with the model relationships, and the model isn't being updated:
Vanilla HTML
<form role="form" ng-model="customer">
<div class="form-group">
<label for="name">Your Name</label>
<input id="name" class="form-control" ng-model="customer.name" />
</div>
</form>
Simplified (goal) HTML
<div abs-form ng-model="customer">
<input id="name" label="Full Name" placeholder="i.e. Joe Smith"/>
</div>
Controller
.controller('HomeCtrl', function($scope){
$scope.customer = {};
}
abs-form Directive
.directive('absForm', function($compile){
var input = $('<input />'),
label = $('<label />');
group = $('<div class="form-group"></div>'),
formElements = [];
return {
restrict : 'EA',
replace : true,
transclude : false,
scope : {
ngModel : '=',
label : "#"
},
compile : function(tElement, tAttrs){
var children = tElement.children();
var tplElement = angular.element('<form role="form" ng-model="'+ tAttrs.ngModel +'" />');
// Clear the HTML from our element
tElement.html('');
// Loop through each child in the template node and create
// a new input, cloning attributes
angular.forEach(children, function(child){
var newInput = input.clone(),
newLabel = label.clone(),
newGroup = group.clone(),
$child = $(child),
attributes = child.attributes;
// Add the "for" attribute and the label text
newLabel.attr('for', $child.attr('id'));
newLabel.text($child.attr('label'));
// Add the class to the input
newInput.addClass('form-control');
newInput.attr('ng-model', tAttrs.ngModel + "." + $child.attr('id'));
// Copy the attributes from the original node to the new one
$.each(attributes, function(index, prop){
newInput.attr(prop.name, prop.value);
})
// Store the form elements for use in link() later
formElements.push(newLabel, newInput)
// Some reason passing in the formElements botches the appending
newGroup.append([newLabel, newInput]);
// Append the group to the element
tplElement.append(newGroup)
})
//$('input', tplElement).wrap('<span>')
// finally, replace it with our tplElement
tElement.replaceWith(tplElement);
}
}
})
This is the output of the directive above, like I said, the HTML is fine (as far as I can tell), but there's no connection of the model:
<form role="form" ng-model="customer" class="ng-pristine ng-valid">
<div class="form-group">
<label for="name">Full Name</label>
<input class="form-control ng-pristine ng-valid" ng-model="customer.name" id="name" label="Full Name" placeholder="i.e. Joe Smith">
</div>
</form>
Some of the questions I've found with similar scenarios (and similar ways to solve)
Changing ngModel
Adding ngModel to input
The second question was the best scenario, but I can't seem to get my new inputs to contribute to the "customer" model. I'm thinking there's more to it than just adding or changing the ng-model attribute on the node, but something Angular is doing to register the connection...?

Answer 1

The problem with your directive is that it introduces an isolate scope which does not include the original model name. The scope variable customer is henceforth known by the name ngModel within the directive's scope.
I updated the code to get rid of the jQuery dependency but basically it still does the same things.
See this fiddle: manual creation of nodes and ng-model