title: AngularJS: late-binding of ng-model to dom element
body: <p>I have a web page with some HTML elements which I cannot edit. I'd like to dynamically attach ng-model attributes to these and have AngularJS re-bind them to the scope. A simplified example of what I want to accomplish can be found <a href="http://jsfiddle.net/axedre/E2h9t/1/">here</a></p>
  
  <pre><code>&lt;script src="//code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function MyCtrl($scope) {
      $scope.myModel1 = "Hi";
      $scope.myModel2 = "there";
      var myModel2 = angular.element("#myModel2");
      //This won't work
      myModel2.attr("ng-model", "myModel2");
  }
  &lt;/script&gt;
  &lt;div ng-app ng-controller="MyCtrl"&gt;
      &lt;input type="text" ng-model="myModel1"/&gt;
      &lt;!-- I can't touch this --&gt;
      &lt;input type="text" id="myModel2" /&gt;
  &lt;/div&gt;
  </code></pre>