title: ng-click in slickgrid formatter doesn't work
body: <p>I'm a newbie in angularJS</p>
  
  <p>I use angularJS with ui-router and a slickgrid
  I try to call a method from a click on a image to call a web service and delete the row</p>
  
  <p>I have this controller :</p>
  
  <pre><code>app.controller('customerController', ['$scope', '$compile', 'CustomerService',      function ($scope, $compile, CustomerService) {
      // function to get customers
      $scope.getCustomers = function () {
          CustomerService.getCustomers($("#userId").val(), $scope.getArchived).then(function (customers) {
              dataView.beginUpdate();
              dataView.setItems(customers);
              dataView.endUpdate();
              grid.invalidate();
          }, function (reason) {
              noty({ text: reason, type: 'error' });
          });
      }
      // function to archive customer
      $scope.archiveCustomer = function(customerId) {
          if (confirm(translate("LBL_DELETE_CUSTOMER_CONFIRMATION"))) {
              CustomerService.archiveCustomer(customerId).then(function () {
                  $scope.getCustomers();
              }, function (reason) {
                     noty({ text: reason, type: 'error' });
              });
          }
          return false;
      }
  
      // create grid
      var dataView,
          grid;
      var options = {
          enableCellNavigation: true,
          enableColumnReorder: false,
          autoHeight: true
      };
  
      var columns = [
          { id: "id", name: "", field: "id", width: 20, formatter: deleteFormatter, cssClass: "centeredColumn" },
          { id: "customer", name: translate("Customer"), field: "customer", width: 250 }
      ];
  
      function deleteFormatter(row, cell, value, columnDef, dataContext) {
          html = "&lt;img src='images/delete.gif' alt='" + translate("LBL_DELETE_CUSTOMER") + "' style='cursor:pointer;' ng-click='archiveCustomer(" + dataContext.id + ");' /&gt;";
          linker = $compile(angular.element(html));
          htmlElements = linker($scope);
          html = htmlElements[0].outerHTML;
          return html;
      }
  
  dataView = new Slick.Data.DataView({ inlineFilters: true });
      grid = new Slick.Grid("#customersGrid", dataView, columns, options);
  
      $scope.getCustomers();
  }]);
  </code></pre>
  
  <p>My problem is with the ng-click on the img element added by the deleteFormatter.
  What is wrong? I saw sample with directive but it's not clear in my mind... could you light me?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Try with asyncPostRender without success:
  columns definition :</p>
  
  <pre><code>var columns = [
          { id: "id", name: "", field: "id", width: 20, formatter: asyncFormatter, asyncPostRender: deleteRender, cssClass: "centeredColumn" },
          { id: "customer", name: translate("Customer"), field: "customer", width: 250 }
      ];
  </code></pre>
  
  <p>formatter and render:</p>
  
  <pre><code>function asyncFormatter(row, cell, value, columnDef, dataContext) {
      return "Data loading...";
  }
  
  function deleteRender(cellNode, row, dataContext, colDef) {
      html = "&lt;img src='images/delete.gif' alt='" + translate("LBL_DELETE_CUSTOMER") + "' style='cursor:pointer;' ng-click='archiveCustomer(" + dataContext.id + ");' /&gt;";
      linker = $compile(angular.element(html));
      htmlElements = linker($scope);
      $(cellNode).empty()
      cellNode.innerHTML = htmlElements[0].outerHTML;
  }
  </code></pre>