Issue when adding rows programatically, after editing 1st field, when pressing tab, focus goes to second row instead of keep on first row. It goes to the correct column though. Everything starts by pressing "Add" button.

<!doctype html>
<html ng-app="app">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="shortcut icon" href="../img/icons/q.ico"/>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>	  
	  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
	
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>  
	<div class="container">		
		<div ng-controller="MainCtrl" ng-init="coId=999" >
			<span ng-bind="errorMessage"></span>
			<div class="row">
				<div class="col-sm-6"></div>
				<div class="col-sm-6">
					<div class="btn-group btn-group-sm pull-right">			
						<a href="#" class="btn btn-warning" ng-click="addData()">Add
							<span class="glyphicon glyphicon-plus"></span> 
						</a>
					</div>				
				</div>
			</div>						
			<div id="productsGrid1" ui-grid="productsGrid" ui-grid-edit ui-grid-row-edit ui-grid-pagination ui-grid-cellnav class="grid"></div>
		</div>
		<script src="script.js"></script>		
		</div>
	</div>
  </body>
</html>

var app = angular.module('app', ['ngTouch', 'ui.grid','ui.grid.edit','ui.grid.pagination','ui.grid.cellNav','ui.grid.rowEdit']);

app.controller('MainCtrl', ['$scope', '$http','$q', '$interval', function ($scope,$http, $q, $interval) {	  		
	$scope.productsGrid = { 
		enableCellEditOnFocus : true,
		paginationPageSizes: [25,50, 100],
		paginationPageSize: 25,
		enableFiltering: true,
		columnDefs: [
			{ name: 'productId', visible:false},
			{ name: 'companyId', visible:false},
			{ name: 'customerProductId', displayName: 'Code', width: '10%' },
			{ name: 'categoryId', displayName: 'Category', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
				cellFilter: 'mapCategory', editDropdownValueLabel: 'category', editDropdownOptionsArray: [
					{ id: 1, category: 'Hardware' },
					{ id: 2, category: 'Software' },
					{ id: 3, category: 'Others' }
				] 
			},
			{ name: 'name', displayName: 'Name', width: '25%'},
			{ name: 'description', displayName: 'Description', width: '25%'},
			{ name: 'availableQuantity', displayName: 'Availability' , type: 'number', width: '10%' },
			{ name: 'minimumOrder', displayName: 'Min Order' , type: 'number', width: '10%' }
		],
		onRegisterApi: function(gridApi){
			//set gridApi on scope
			$scope.gridApi = gridApi;
			gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);			
			gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
				$scope.$apply();
			});
			
		}
	};
	
	$scope.$watch('coId', function () {
		//original function to a server resource goes here
		$scope.productsGrid.data = [
		  {
			"companyId": $scope.coId,
			"productId" : 1,
			"customerProductId" : "xyz",
			"categoryId": 1,
			"name": "Product1",
			"description": "Description product 1",
			"availableQuantity": 100,
			"minimumOrder": 10                
		},
		{
			"companyId": $scope.coId,
			"productId" : 2,
			"customerProductId" : "abc",
			"categoryId": 2,
			"name": "Product2",
			"description": "Description product 2",
			"availableQuantity": 200,
			"minimumOrder": 12                
		},
		{
			"companyId": $scope.coId,
			"productId" : 3,
			"customerProductId" : "pqr",
			"categoryId": 3,
			"name": "Product3",
			"description": "Description product 3",
			"availableQuantity": 100,
			"minimumOrder": 5                
		}];
	});
	
	$scope.saveRow = function( rowEntity ) {	
		
		var promise = $q.defer();
		$scope.gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );	 		
		var endPoint = '';
		if(rowEntity.productId === 0){
			endPoint = 'insert endpoint'
		}
		else{
			endPoint = 'update endpoint';
		}
		
		// fake delay of 2 seconds whilst the save occurs
		// I'm actually making a call to an end point (thus the code above)
    $interval( function() {
        promise.resolve();
    }, 2000, 1);
	};	
	
	$scope.addData = function() {						
		//console.log('Focused cell:' +  $scope.gridApi.cellNav.getFocusedCell());
		$scope.productsGrid.data.splice(0,0,{
			"companyId": $scope.coId,
			"productId" : 0,
			"customerProductId" : "",
			"categoryId": 1,
			"name": "",
			"description": "",
			"availableQuantity": 100,
			"minimumOrder": 10                
		});		
		$scope.gridApi.cellNav.scrollToFocus( $scope.productsGrid.data[1], $scope.productsGrid.columnDefs[2]);				
	};
}])
.filter('mapCategory', function() {
			var categoryHash = {
				1: 'Hardware',
				2: 'Software',
				3: 'Other'
			};
			return function(input) {
				if (!input){
				  return '';
				} 
				else {
				  return categoryHash[input];
				}
			};
		});

/* Styles go here */