Cell Navigation Issues with Add Row Feature.

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <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" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit="" ui-grid-cellnav=""></div>
      <br />
      <br />
      <button class="btn btn-default" ng-click="addUser()">Add row</button>
    </div>
    <script src="app.js"></script>
  </body>

</html>

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

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.customMsg = "some sample message"; // adding a custom message
  $scope.gridOptions = {
    rowHeight: 45,
    enableSorting: true,
    enableFiltering: false,
    multiSelect: false,
    enableCellEditOnFocus: true,
    enableCellEdit: true,
    columnDefs: [{
      field: 'firstName',
      displayName: 'First Name',
      enableColumnMenu: false
    }, {
      field: 'lastName',
      displayName: 'Last Name',
      enableColumnMenu: false
    }, {
      field: 'company',
      displayName: 'Company',
      enableColumnMenu: false,
      editableCellTemplate: "<div><form name=\"inputForm\"><input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"  minlength=3 maxlength=10 required><a href=\'#\' data-toggle=\'tooltip\' data-placement=\'top\' title=\'error!\' ng-show=\'!inputForm.$valid\'>errMsg - {{customMsg}}</a></form></div>"
    }, {
      field: 'employed',
      displayName: 'Employed',
      enableColumnMenu: false
    }]
  };

  $scope.gridOptions.data = [{
    "firstName": "Cox",
    "lastName": "Carney",
    "company": "Enormo",
    "employed": true
  }, {
    "firstName": "Lorraine",
    "lastName": "Wise",
    "company": "Comveyer",
    "employed": false
  }, {
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
  }];

  $scope.gridOptions.onRegisterApi = function(gridApi) {
    $scope.gridApi = gridApi;
  };

  $scope.addUser = function() {
    var _model = {
      "firstName": null,
      "lastName": null,
      "company": null,
      "employed": null
    };

    $scope.gridOptions.data.unshift(_model);
    setTimeout(function() {
      $scope.gridApi.cellNav.scrollToFocus($scope.gridOptions.data[0], $scope.gridOptions.columnDefs[0]);
    }, 100)

  };
}]);

.grid {
  width: 500px;
  height: 250px;
}