title: How to add ng-model to an at runtime created html object
body: <p>I'm having a simple html form like this</p>
  
  <pre><code>&lt;div ng-app="app"&gt;
      &lt;form action="" ng-controller="testController" id="parent"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And now I want to add an input field from javascript</p>
  
  <pre><code>var app = angular.module('app',[]);
  app.controller('testController',testController);
  function testController($scope){
      var input = document.createElement('input');
      var form = document.getElementById('parent');
  
      input.setAttribute("type","number");
      input.setAttribute("id","testId");
      input.setAttribute("name", "test");
      input.setAttribute("ng-model","test");  
      form.appendChild(input);
  }
  </code></pre>
  
  <p>The input field also get's generated as expected</p>
  
  <pre><code>&lt;input type="number" id="testId" name="test" ng-model="test"&gt;
  </code></pre>
  
  <p>but the ng-model between this input field and <code>$scope.test</code> is not working.</p>