title: Action Button in Angular UI Grid 3.x version
body: <p>I am trying to render a simple table using <a href="http://ui-grid.info/" rel="noreferrer">Angular UI Grid (unstable version)</a>.
  Against each row I need a button when clicked should be handled in my parent controller.</p>
  
  <p><a href="http://plnkr.co/edit/KuptJG?p=preview" rel="noreferrer">Plunker</a></p>
  
  <p>Javascript:-</p>
  
  <pre><code>angular.module("app", ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.expandable', 'ui.grid.paging']).controller("appController", function($scope) {
    console.log("Controller is up.");
    $scope.data = [];
    for (var i = 0; i &lt; 50; i++) {
      $scope.data.push({
        fullName: "Name" + i,
        age: i
      });
    }
  
    $scope.clickHandler = function(){
      // this never gets invoked ?!
      console.log("Row Action click Handler.");
    };
  
  
    $scope.gridOptions = {
      data: $scope.data,
      columnDefs:[ {name:'fullName',field:'fullName'},
                {name:'age',field:'age'},
                {name:' ',cellTemplate:'&lt;div&gt;&lt;button ng-click="clickHandler()"&gt;Click Here&lt;/button&gt;&lt;/div&gt;'}
              ]
    };
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
       &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/csv.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/release/ui-grid-unstable.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body data-ng-app="app"&gt;
    &lt;h1&gt;Angular UI Grid unstable&lt;/h1&gt;
    &lt;div data-ng-controller="appController"&gt;
      &lt;div class="grid" ui-grid="gridOptions"&gt;
        Test 
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>As in code, to render the action button I have used <strong>columnDefs</strong> with inline template for the third column.</p>
  
  <h2>PROBLEM</h2>
  
  <p>Clicking the button doesn't work. I expect ' <strong>$scope.clickHandler</strong>' function to be executed on click. Also, I should be able to pass 'name' as argument to the click handler.</p>