title: How to Bind dom element to script data in angularjs
body: <p>I am trying to add input field onclick some button and that value am trying to bind with some variable in controller. but it is not binding . </p>
  
  <p>How to do?</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;TODO supply a title&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="app1" &gt;
          &lt;div ng-controller="cont"&gt;
              &lt;button ng-click="cal()"&gt;try&lt;/button&gt;
              &lt;div id="inputid"&gt;&lt;/div&gt;
              &lt;span&gt;{{val}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;script&gt;
              var app = angular.module('app1',[]);
              app.controller('cont',function($scope){
                  $scope.val = "hi";
                  $scope.cal=function($compile){
                      var str = '&lt;input type="text" ng-model="val"/&gt;';
                      angular.element(document.getElementById('space-for-buttons')).append($compile(str));
                  };
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here val value is not changing...</p>