title: Inconsistent tab behaviour with ngGrid
body: <p>I'm facing some inconsistent behaviour when the tab key when attempting to implement an <code>ngGrid</code> that allows the user to edit some of the cells.</p>
  
  <p>The problem is that the tab key does not move me to the next field if I select the input field without first having selected the entire row. </p>
  
  <p>Is there a way to get the required functionality without explicitly trying to select the row on focus of the input control?</p>
  
  <p>You can see the <code>plunkr</code> <a href="http://plnkr.co/edit/HFqB2c0nbLdaAAxP4GG9" rel="nofollow">here</a>.</p>
  
  <p>Here is the markup:</p>
  
  <pre><code>&lt;body ng-controller='myCntrl' &gt;
  &lt;h1&gt;Unable to Tab across input fields&lt;/h1&gt;
  &lt;div class='gridStyle' ng-grid="model.gridOptions"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the controller:</p>
  
  <pre><code>var app = angular.module('myapp',['ngGrid']);
  
      app.controller('myCntrl',function($scope) {
      $scope.model = {};
      $scope.model.data = [{field1: 1,field2: 2,field3: 3 },{field1:4,field2: 5,field3:6 }];
  
      $scope.model.gridOptions = {
         data: 'model.data',
         enableCellSelection: true,
  
         columnDefs: [
              { field: 'field1', displayName: 'Field 1', width: '*', cellTemplate: '&lt;input ng-required="true" type="number" ng-model="COL_FIELD" ng-input="COL_FIELD"&gt;' },
              { field: 'field2', displayName: 'Field 2', width: '*', cellTemplate: '&lt;input ng-required="true"  type="number" ng-model="COL_FIELD" ng-input="COL_FIELD"&gt;' },
              { field: 'field3', displayName: 'Field 3', width: '*', cellTemplate: '&lt;input ng-required="true"  type="number" ng-model="COL_FIELD" ng-input="COL_FIELD"&gt;' }
         ]
      };
  });
  </code></pre>