title: Angular JS ui-grid cellTemplate's ng-click not firing when scope function tries to pass the cell info as params
body: <p>I can't seem to get ng-click to fire for me and I've been trying for hours. I've read a bunch of similar issues on SO, but none seem to fix my issue. Note that if I change ng-click to onclick the event fires.</p>
  
  <p>My JS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ngTouch', 'ngAnimate', 'ui.grid', 'ui.grid.moveColumns', 'ui.grid.resizeColumns']);
  
  app.controller('matterController', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
  
      var industryFields,
          departmentFields,
          regionFields;
  
      $scope.gridOptions = {
          enableFiltering: true,
          enableColumnResizing: true,
          enableSorting: true,
          columnDefs: [
              { name: 'Client_Name', width: 120, enableHiding: false },
              { name: 'Client_Number', width: 140, enableHiding: false },
              { name: 'Matter_Name', width: 130, enableHiding: false },
              { name: 'Matter_Number', width: 140, enableHiding: false },
              { name: 'Billing_Partner', width: 250, enableHiding: false },
              { name: 'Matter_Descriptions', width: 180, enableHiding: false
  , cellTemplate: '&lt;div class="ui-grid-cell-contents"&gt;&lt;a ng-href="#" ng-click="displayDescription(\'{{COL_FIELD}}\');"&gt;View Description&lt;/a&gt;&lt;/div&gt;' },
              { name: 'Industries', width: 120, enableHiding: false },
              { name: 'Departments', width: 130, enableHiding: false },
              { name: 'Regions', width: 120, enableHiding: false }
          ],
          showGroupPanel: true
      };
  
      function loadData() {
          $http.get('api/ClientMatter/')
          .success(function (data) {
              $scope.gridOptions.data = data;
          });
  
          $http.get('Home/GetIndustries')
          .success(function (data) {
              industryFields = data;
          });
  
          $http.get('Home/GetDepartments')
          .success(function (data) {
              departmentFields = data;
          });
  
          $http.get('Home/GetRegions')
          .success(function (data) {
              regionFields = data;
          });
      }
  
      $scope.displayDescription = function(data) {
          alert(data);
      }
  
      loadData();
  }]);</code></pre>
  </div>
  </div>
  </p>
  
  <p>The "Matter_Descriptions" column has a custom cell template which needs to call the "displayDescription" method. So far I can't get it to fire at all.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="screen-container" ng-controller="matterController"&gt;
      &lt;button onclick="location.href = '@Url.Action("Create", "Home")'; return false;" style="float: right;"&gt;New Matter&lt;/button&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;div id="home-grid" ui-grid="gridOptions" class="grid" ui-grid-move-columns ui-grid-resize-columns&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is a screen shot of the hyperlink at runtime showing the data exactly as I want it:</p>
  
  <p><a href="https://i.stack.imgur.com/CvSs2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CvSs2.png" alt="enter image description here"></a></p>
  
  <p>Pretty basic. Any help is appreciated! Thanks!</p>