title: Manual creation of nodes and ng-model
body: <p>In more attempts to DRY bootstrap and AngularJS, I'm attempting to create a form and children while maintaining the <code>ng-model</code> 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:</p>
  <h3>Vanilla HTML</h3>
  <pre><code>&lt;form role=&quot;form&quot; ng-model=&quot;customer&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;name&quot;&gt;Your Name&lt;/label&gt;
      &lt;input id=&quot;name&quot; class=&quot;form-control&quot; ng-model=&quot;customer.name&quot; /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <h3>Simplified (goal) HTML</h3>
  <pre><code>&lt;div abs-form ng-model=&quot;customer&quot;&gt;
    &lt;input id=&quot;name&quot; label=&quot;Full Name&quot; placeholder=&quot;i.e. Joe Smith&quot;/&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>Controller</h3>
  <pre><code>.controller('HomeCtrl', function($scope){
      $scope.customer = {};
  }
  </code></pre>
  <h3>abs-form Directive</h3>
  <pre><code>.directive('absForm', function($compile){
  var input = $('&lt;input /&gt;'),
      label = $('&lt;label /&gt;');
      group = $('&lt;div class=&quot;form-group&quot;&gt;&lt;/div&gt;'),
      formElements = [];
  return {
    restrict : 'EA',
    replace : true,
    transclude : false,
    scope : {
      ngModel : '=',
      label : &quot;@&quot;
    },
    compile : function(tElement, tAttrs){
      var children = tElement.children();
  
      var tplElement = angular.element('&lt;form role=&quot;form&quot; ng-model=&quot;'+ tAttrs.ngModel +'&quot; /&gt;');
  
      // 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 &quot;for&quot; 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 + &quot;.&quot; + $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('&lt;span&gt;')
  
      // finally, replace it with our tplElement
      tElement.replaceWith(tplElement);
  
    }
  }
  })
  </code></pre>
  <p>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:</p>
  <pre><code>&lt;form role=&quot;form&quot; ng-model=&quot;customer&quot; class=&quot;ng-pristine ng-valid&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;name&quot;&gt;Full Name&lt;/label&gt;
          &lt;input class=&quot;form-control ng-pristine ng-valid&quot; ng-model=&quot;customer.name&quot; id=&quot;name&quot; label=&quot;Full Name&quot; placeholder=&quot;i.e. Joe Smith&quot;&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Some of the questions I've found with similar scenarios (and similar ways to solve)</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/19578554/angularjs-is-it-possible-to-change-the-value-of-ngmodel-attribute-on-directive?rq=1">Changing ngModel</a></li>
  <li><a href="https://stackoverflow.com/questions/17405790/adding-ngmodel-to-input-with-a-directive">Adding ngModel to input</a></li>
  </ul>
  <p>The second question was the best scenario, but I can't seem to get my new inputs to contribute to the &quot;customer&quot; model.  I'm thinking there's more to it than just adding or changing the <code>ng-model</code> attribute on the node, but something Angular is doing to register the connection...?</p>