diff --git a/misc/tutorial/202_cellnav.ngdoc b/misc/tutorial/202_cellnav.ngdoc
index b0a37714e9..df1d3d8e43 100644
--- a/misc/tutorial/202_cellnav.ngdoc
+++ b/misc/tutorial/202_cellnav.ngdoc
@@ -35,13 +35,15 @@ while still allowing the right arrow to be handled by the grid.
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']);
 
-    app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
-      $scope.gridOptions = {
+    app.controller('MainCtrl', function ($scope, $http, $log) {
+      var vm = this;
+
+      vm.gridOptions = {
         modifierKeysToMultiSelectCells: true,
-        keyDownOverrides: [ { keyCode: 39, ctrlKey: true }],
+        keyDownOverrides: [{ keyCode: 39, ctrlKey: true }],
         showGridFooter: true
       };
-      $scope.gridOptions.columnDefs = [
+      vm.gridOptions.columnDefs = [
         { name: 'id', width:'150' },
         { name: 'name', width:'200' },
         { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false, width:'100' },
@@ -55,70 +57,78 @@ while still allowing the right arrow to be handled by the grid.
 
       $http.get('/data/500_complex.json')
         .then(function(response) {
-          $scope.gridOptions.data = response.data;
+          vm.gridOptions.data = response.data;
         });
 
-        $scope.info = {};
+        vm.info = {};
+
+        vm.currentFocused = '';
 
-        $scope.currentFocused = "";
+        vm.getCurrentFocus = function(){
+          var rowCol = vm.gridApi.cellNav.getFocusedCell();
 
-        $scope.getCurrentFocus = function(){
-          var rowCol = $scope.gridApi.cellNav.getFocusedCell();
           if(rowCol !== null) {
-              $scope.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
+              vm.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
           }
         };
 
-        $scope.getCurrentSelection = function() {
-          var values = [];
-          var currentSelection = $scope.gridApi.cellNav.getCurrentSelection();
+        vm.getCurrentSelection = function() {
+          var values = [],
+            currentSelection = vm.gridApi.cellNav.getCurrentSelection();
+
           for (var i = 0; i < currentSelection.length; i++) {
             values.push(currentSelection[i].row.entity[currentSelection[i].col.name])
           }
-          $scope.printSelection = values.toString();
+          vm.printSelection = values.toString();
         };
 
-        $scope.scrollTo = function( rowIndex, colIndex ) {
-          $scope.gridApi.core.scrollTo( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
+        vm.scrollTo = function( rowIndex, colIndex ) {
+          vm.gridApi.core.scrollTo( vm.gridOptions.data[rowIndex], vm.gridOptions.columnDefs[colIndex]);
         };
 
-        $scope.scrollToFocus = function( rowIndex, colIndex ) {
-          $scope.gridApi.cellNav.scrollToFocus( $scope.gridOptions.data[rowIndex], $scope.gridOptions.columnDefs[colIndex]);
+        vm.scrollToFocus = function( rowIndex, colIndex ) {
+          vm.gridApi.cellNav.scrollToFocus( vm.gridOptions.data[rowIndex], vm.gridOptions.columnDefs[colIndex]);
         };
 
-        $scope.gridOptions.onRegisterApi = function(gridApi){
-           $scope.gridApi = gridApi;
-           gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
-                 // var rowCol = {row: newRowCol.row.index, col:newRowCol.col.colDef.name};
-                 // var msg = 'New RowCol is ' + angular.toJson(rowCol);
-                 // if(oldRowCol){
-                 //    rowCol = {row: oldRowCol.row.index, col:oldRowCol.col.colDef.name};
-                 //    msg += ' Old RowCol is ' + angular.toJson(rowCol);
-                 // }
-                  $log.log('navigation event');
-                });
-            gridApi.cellNav.on.viewPortKeyDown($scope,function(event, newRowCol){
-                    var row = newRowCol.row;
-                    var col = newRowCol.col
-                    if (event.keyCode === 39) {
-                        $scope.gridApi.cellNav.scrollToFocus(row.entity, $scope.gridApi.grid.columns[$scope.gridApi.grid.columns.length - 1]);
-                    }
-                });
+        vm.gridOptions.onRegisterApi = function(gridApi){
+           vm.gridApi = gridApi;
+           gridApi.cellNav.on.navigate($scope, function(newRowCol, oldRowCol) {
+             // var rowCol = {row: newRowCol.row.index, col:newRowCol.col.colDef.name};
+             // var msg = 'New RowCol is ' + angular.toJson(rowCol);
+             // if(oldRowCol){
+             //    rowCol = {row: oldRowCol.row.index, col:oldRowCol.col.colDef.name};
+             //    msg += ' Old RowCol is ' + angular.toJson(rowCol);
+             // }
+             $log.log('navigation event');
+           });
+           gridApi.cellNav.on.viewPortKeyDown($scope, function(event, newRowCol) {
+             var row = newRowCol.row,
+               col = newRowCol.col;
+
+             if (event.keyCode === 39) {
+               vm.gridApi.cellNav.scrollToFocus(row.entity, vm.gridApi.grid.columns[vm.gridApi.grid.columns.length - 1]);
+             }
+           });
         };
-    }]);
+    });
   </file>
   <file name="index.html">
-    <div ng-controller="MainCtrl">
-      <button type="button" class="btn btn-success" ng-click="scrollTo(20,0)">Scroll To Row 20</button>
-      <button type="button" class="btn btn-success" ng-click="scrollTo(0,7)">Scroll To Balance</button>
-      <button type="button" class="btn btn-success" ng-click="scrollTo(50,7)">Scroll To Row 50, Balance</button>
-      <button type="button" class="btn btn-success" ng-click="scrollToFocus(50,7)">Focus Row 50, Balance</button>
-      <button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button>  <span ng-bind="currentFocused"></span>
-      <button type="button" class="btn btn-success" ng-click="getCurrentSelection()">Get Current focused cell values</button>
-      <input type="text" ng-model="printSelection" placeholder="Click the 'Get current focused cell values' button to print cell values of selection here" class="printSelection">
+    <div ng-controller="MainCtrl as $ctrl">
+      <button type="button" class="btn btn-success" ng-click="$ctrl.scrollTo(20,0)">Scroll To Row 20</button>
+      <button type="button" class="btn btn-success" ng-click="$ctrl.scrollTo(0,7)">Scroll To Balance</button>
+      <button type="button" class="btn btn-success" ng-click="$ctrl.scrollTo(50,7)">Scroll To Row 50, Balance</button>
+      <button type="button" class="btn btn-success" ng-click="$ctrl.scrollToFocus(50,7)">Focus Row 50, Balance</button>
+      <br>
+      <br>
+      <button type="button" class="btn btn-success" ng-click="$ctrl.getCurrentFocus()">Get Current focused cell</button>  <span ng-bind="$ctrl.currentFocused"></span>
+      <br>
+      <br>
+      <button type="button" class="btn btn-success" ng-click="$ctrl.getCurrentSelection()">Get Current focused cell values</button>
+      <br>
+      <input type="text" ng-model="$ctrl.printSelection" placeholder="Click the 'Get current focused cell values' button to print cell values of selection here" class="printSelection">
       <br>
       <br>
-      <div ui-grid="gridOptions" ui-grid-cellNav ui-grid-pinning class="grid"></div>
+      <div ui-grid="$ctrl.gridOptions" ui-grid-cellNav ui-grid-pinning class="grid"></div>
     </div>
   </file>
   <file name="main.css">
@@ -127,7 +137,7 @@ while still allowing the right arrow to be handled by the grid.
       height: 400px;
     }
     .printSelection {
-        width: 600px;
+        width: 500px;
         margin-top: 10px;
     }
   </file>
diff --git a/src/features/cellnav/js/cellnav.js b/src/features/cellnav/js/cellnav.js
index aa3c63ab4d..2d32cc03b2 100644
--- a/src/features/cellnav/js/cellnav.js
+++ b/src/features/cellnav/js/cellnav.js
@@ -1141,7 +1141,7 @@
             // a short period of time (from now until $timeout function executed)
             clearFocus();
 
-            $timeout(refreshCellFocus);
+            $scope.$applyAsync(refreshCellFocus);
           }, [uiGridConstants.dataChange.ROW]);
 
           function refreshCellFocus() {