title: Angular: ng-click on ng-bind-html block not firing
body: <p>I am quite new in the area of AngularJS and of course I am doing something in the wrong way. So, here is my problem: I have a small chat widget which takes the data through JSON from a PHP API. In my JSON I provide all the messages with wrappers and with some ng* tags. The problem I have is that the ng-click action is not fired on those elements. The html block are injected with ng-bind-html.</p>
  
  <p>Here is my angular app:</p>
  
  <pre><code>var chat = angular.module("chat", ['ngDialog']);
  
  chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {
  
      $scope.messages = "";
  
  
      $scope.getData = function() {
          $http.get("/url/to/api")
              .success(function(data, status, headers, config) {
                  $scope.messages = data.html;
              }).error(function(data, status, headers, config) {
                  //alert("AJAX f   ailed!");
              });
      };
  
      $scope.getData();
  
      $scope.getHtml = function(html){
          return $sce.trustAsHtml(html);
      };
  
      // Function to replicate setInterval using $timeout service.
      $scope.intervalFunction = function(){
          $timeout(function() {
              $scope.getData();
              $scope.intervalFunction();
          }, 5000)
      };
  
  
      // Kick off the interval
      $scope.intervalFunction();
  
      $scope.messageAdminTools = function(message_id)
      {
          console.log("called");
          var template = $scope.adminToolsTemplate(message_id);
          console.log(template);
          ngDialog.open({
              template: template,
              plain: true
          });
      };
  
      $scope.adminToolsTemplate = function(message_id)
      {
          $http.get("/url/to/api" + message_id)
              .success(function(data, status, headers, config) {
                  return data.html;
              }).error(function(data, status, headers, config) {
                  //alert("AJAX f   ailed!");
              });
      };
  });
  </code></pre>
  
  <p>And here is the html code that comes from the JSON:</p>
  
  <pre><code>&lt;body ng-controller="GetChatMessagesController" class="ng-scope"&gt;
      &lt;div class="messages-container ng-binding" ng-bind-html="getHtml(messages)"&gt;
          &lt;div class="message message_1"&gt;
              &lt;span class="time"&gt;16:33&lt;/span&gt;
              &lt;span class="chatbox_user"&gt;&lt;a target="_blank" href="url"&gt;admin&lt;/a&gt;: &lt;/span&gt;
              &lt;span class="text"&gt;test &lt;a href="javascript:void(0);" class="chat-tools" ng-click="messageAdminTools('1')"&gt;x&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The <code>ng-click="messageAdminTools('1')</code> does not fire when I click the element. What am I doing wrong?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT: Working code</strong></p>
  
  <p>Here is the code modified after the answer, code that solves the issue:</p>
  
  <pre><code>var chat = angular.module("chat", ['ngDialog']);
  
  chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {
  
      $scope.messages = "";
  
  
      $scope.getData = function() {
          $http.get("/url/to/api")
              .success(function(data, status, headers, config) {
                  $scope.messages = data.html;
              }).error(function(data, status, headers, config) {
                  //alert("AJAX f   ailed!");
              });
      };
  
      $scope.getData();
  
      $scope.getHtml = function(html){
          return $scope.messages;
      };
  
      // Function to replicate setInterval using $timeout service.
      $scope.intervalFunction = function(){
          $timeout(function() {
              $scope.getData();
              $scope.intervalFunction();
          }, 5000)
      };
  
  
      // Kick off the interval
      $scope.intervalFunction();
  
      $scope.messageAdminTools = function(message_id)
      {
          console.log("called");
          var template = $scope.adminToolsTemplate(message_id);
          console.log(template);
          ngDialog.open({
              template: template,
              plain: true
          });
      };
  
      $scope.adminToolsTemplate = function(message_id)
      {
          $http.get("/url/to/api")
              .success(function(data, status, headers, config) {
                  return data.html;
              }).error(function(data, status, headers, config) {
                  //alert("AJAX f   ailed!");
              });
      };
  }).directive('compile', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
          scope.$watch(
              function(scope) {
                  // watch the 'compile' expression for changes
                  return scope.$eval(attrs.compile);
              },
              function(value) {
                  // when the 'compile' expression changes
                  // assign it into the current DOM
                  element.html(value);
  
                  // compile the new DOM and link it to the current
                  // scope.
                  // NOTE: we only compile .childNodes so that
                  // we don't get into infinite loop compiling ourselves
                  $compile(element.contents())(scope);
              }
          );
      };
  }]);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-controller="GetChatMessagesController" class="ng-scope"&gt;
      &lt;div class="messages-container" compile="getHtml(messages)"&gt;
          &lt;div class="message message_1 ng-scope"&gt;
              &lt;span class="time"&gt;16:33&lt;/span&gt;
              &lt;span class="chatbox_user"&gt;&lt;a target="_blank" href="url"&gt;admin&lt;/a&gt;: &lt;/span&gt;
              &lt;span class="text"&gt;test &lt;a href="javascript:void(0);" class="chat-tools" ng-click="messageAdminTools('1')"&gt;x&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>