title: Directive inside the dynamically created elements not working with angularjs
body: <p>I am trying to change a text to input['type="text"] element with a button appended for updating it. However, when i attach a function($scope.commit_update) on its ng-click event,the function is not firing.</p>
  
  <pre><code>$scope.commit_update = function(id){
        console.log(id);
  }
  $scope.update = function($service_id){
  
      var current_text = document.getElementById($service_id).innerHTML;
      if(/&lt;[a-z][\s\S]*&gt;/i.test(current_text) == false){
          var vars = $service_id.split('-');
          var node = '&lt;div class="input-group" style="width:200px;"&gt;&lt;span class="input-group-addon" style="cursor:pointer;" ng-click="commit_update('+vars[1]+')"&gt;Save&lt;/span&gt;&lt;input type="text" class="form-control" value="'+current_text+'" style="width:200px;"&gt;&lt;/div&gt;';   
          document.getElementById($service_id).innerHTML = node;
      }
  
  }
  </code></pre>