title: AngularJS - ng-click not working in custom directive
body: <p>I have created a custom directive. The controls defined in templates seem to be working fine. But, I need to <strong>append</strong> another control - image button, to a control defined in templates according to some <strong>condition</strong>. To do this I included an IF condition, created an image button and added a 'ng-click' attribute to it. However, using javascript '<em>append</em>' of image button to my template control's ('html') does not seem to work as it says no 'append' is an undefined function. Hence I used '<em>concat</em>()', this renders the image button but 'ng-click' does not work. The function in the controller does get hit. Please help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div ng-controller="pdfFormsEditController"&gt;
                  &lt;split-pane id="splitPane" height="800"&gt;
     &lt;split-pane-component id="leftPane" width="50%"&gt; &lt;div class="form-editor boxed-section dashed" id="form"&gt;
                          &lt;form-control ng-repeat="control in formDefinition.Definition.controls" control="control" /&gt;
                      &lt;/div&gt;&lt;/split-pane-component&gt;                                  
    &lt;/split-pane&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my directive file -</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";
  
  angular.module('configurePDF.directives.noteForms', [])
  
  .directive('formControl', ['$compile', function ($compile) {
      var templates = {
      
         "NoteLabel":'&lt;label ng-click="onSelectNoteField(control.Name)" ng-style="control.style" style="font-style:Bold; font-size: 8.25pt; font-family:Arial"&gt;{{control.Properties.DisplayName}}&lt;/label&gt;',
         "NoteMedcinFinding":'&lt;p ng-click="onSelectNoteField(control.Name)" ng-style="control.style"&gt;&lt;input  type="image" src="../Images/YesNo.gif" style="Width:35px; Height:17px;"&gt;&lt;label style="font-style:Bold; font-size: 8.25pt; font-family:Arial"&gt;{{control.Properties.OriginalText}}&lt;/label&gt;&lt;/input&gt;&lt;/p&gt;'     
       
      }
  
      var linker = function(scope, element, attrs) {
          
          var location = scope.control.Properties.Location.split(',');
          var size=scope.control.Properties.Size.split(',');  
         // var font=scope.control.Properties.Font.split(',');      
          
          scope.control.style = {position: "absolute", left: (parseInt(location[0])*1.5) + "px", top: location[1] + "px" ,minWidth:425+"px",height:size[1]+"px"};
  
          var html = templates[scope.control.Type];    
          debugger;
  
          if(scope.control.Properties.DetailFormID !=  "00000000-0000-0000-0000-000000000000"){
         
              var img = document.createElement('input');
              img.type = "image"
              img.src = "../../Images/plus.png";
              img.height = 10;
              img.width = 10;
              img.style.position = 'absolute'
              img.style.left =  ((parseInt(location[0])*1.5) - 13) + "px"
              img.style.top = (parseInt(location[1]) + 3)+ "px"
              //img.className ="ng-scope ng-binding"
              //img.onclick = "onSelectNoteField(scope.control.Properties.DetailFormID)"
              var attr = document.createAttribute("data-ng-click");
              attr.value = "onSelectNoteField(control.Properties.DetailFormID)";
              img.attributes.setNamedItem(attr);
              debugger;
              html = html.concat(img.outerHTML);
             //console.log(element);
          }
           var elem =  $compile(html)(scope);  
          element.replaceWith(elem);
      }
  
      return {
          restrict: "E",
          replace: true,
          link: linker,
          scope: {
              control:'='
          }
      };
  
  }]);</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE:</strong> I read that <em>class="ng-scope ng-binding"</em> should be created automatically in the element's html. But in my image button the class is is just "ng-scope". So, may be there is some binding issue to the scope, because I was not able to <em>append</em> the image button but <em>concatenate</em> it?? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;input type="image" src="../../Images/plus.png" height="10" width="10" style="position: absolute; left: 32px; top: 83px;" data-ng-click="onSelectNoteField(control.Properties.DetailFormID)" class="ng-scope"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Controller:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/
        .controller('pdfFormsEditController', ['$scope', '$routeParams', 'pdfFormsService','mastersService','$rootScope',
          function pdfFormsEditController($scope, $routeParams, pdfFormsService,mastersService,$rootScope) {
              var allNoteFields = [];
              $scope.editMode = true;
             
            
             $scope.onSelectNoteField = function(noteField) {  
              debugger;
               $scope.formDefinition = {};          
               var result = pdfFormsService.getFormDefinition('3151ff0d-6c93-4c80-9182-fd05f7d6cf90');
               
              result.success(function (formDefinition) {
              console.log(formDefinition);
              $scope.formDefinition = formDefinition;
              var size = $scope.formDefinition.Definition.Properties.Size.split(',');
              $scope.formDefinition.style = { position: 'relative', width: size[0] + "px", height: size[1] + "px" }
  
                  
              }      </code></pre>
  </div>
  </div>
  </p>