title: get a cell value in angular ui-grid
body: <p>I'm currently using angular ui-grid for my project to display 3 columns of data which will be retrieved as a JSON object through an API call.</p>
  
  <p>I'm currently able to display the data the grid. Now, whenever the user clicks on a particular row, another API call is made sending the first column's respective cell value as query data. The response that is received is shown inside a modal window.</p>
  
  <p>However, I'm not able to place a click event on the grid and retrieve the cell value when a particular row is clicked and hence unable to make the second API call correctly. </p>
  
  <p>I guess a typical ng-click on the div won't serve my purpose as it doesn't capture the cell value.</p>
  
  <p>Can someone please suggest how this functionality can be achieved?</p>
  
  <p><strong>Note:</strong> The cells are not editable. They are only read-only.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ui-grid="gridOptions" ui-grid-resize-columns ui-grid-exporter class="grid"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>testFactory.getAPIData()
              .then(function(response){
                  $scope.gridOptions.data = response.data;
              }), function(error){
                  console.log("Factory error");
              }
  
          $scope.gridOptions = { 
              enableRowSelection: true, 
              enableRowHeaderSelection: false   
          };
          $scope.gridOptions.enableHorizontalScrollbar = 0;            
  
          $scope.gridOptions.columnDefs = [
                  { field: 'id', name: 'ID', enableHiding: false },
                  { field: 'name', name: 'NAME', enableHiding: false },
                  { field: 'age', name: 'AGE', enableHiding: false }
          ];
  
          $scope.gridOptions.onRegisterApi = function (gridApi) {
              $scope.myGridApi = gridApi;
          };
  </code></pre>