AngularJS cell navigation not working while using with celltemplate

I am having following code in my controller:

app.controller("homeController", homeController);
homeController.$inject = ["ui.grid.cellNav", "$scope"];

$scope.gridOptions = {
        enableRowSelection: true,
        enableSelectAll: true,
        modifierKeysToMultiSelect: false,        
        enableRowHeaderSelection: false,
    };


vm.objectViewGridOptions = {
    enableColumnMenus: false,
    enableSorting: true,
    enableGridMenu: true,
    angularCompileRows: true,
    multiSelect: false,
    modifierKeysToMultiSelect: false,                        
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    exporterMenuPdf: false,
    onRegisterApi: function (gridApi) {
    //set gridApi on scope
    vm.objectViewGridOptions.gridApi = gridApi;                            
    gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol){                  
                                     vm.objectViewGridOptions.gridApi.selection.selectRow(newRowCol.row.entity);
                                    vm.objectViewGridOptions.gridApi.core.notifyDataChange($scope.gridApi.grid, uiGridConstants.dataChange.COLUMN);
    });
   }       
};


var colDef = [];               

for (var i = 0; i < columnNames.length; i++) {
                    if (i < 4) {
                        colDef.push(
                        {
                            field: columnNames[i],
                            displayName: columnNames[i],
                            width: '100',
                            // Highlighting first row in ui-grid
                            cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents"   ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>',
                            sortingAlgorithm: sort
                        });
                    }
                    else
                        colDef.push(
                        {
                            field: columnNames[i],
                            displayName: columnNames[i],
                            width: '100',
                            cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>',
                            sortingAlgorithm: sort
                        });
                }

vm.objectViewGridOptions.columnDefs = colDef;

And in my HTML:

<div style="clear:both;" ui-grid="vm.objectViewGridOptions" ng-if="vm.objectViewGridOptions.data" ui-grid-resize-columns ui-grid-cellnav ui-grid-move-columns ui-grid-exporter class="objectviewgrid"></div>

I have used cellTemplate to give background color to the grid cells and ui-grid-cellNav to navigate between the grid cells.

If I use ui-grid-cellNav along with cellTemplate, cell navigation is not working. If I comment out the cellTemplate code, then the cell navigation is working fine.

Where am I getting struck? Forget about the loop logic and all. I cannot place the entire code here. This is already looking clumsy.

I have used cellClass and cellStyle instead of cellTemplate. Here is my code in my controller:

for (var i = 0; i < columnNames.length; i++) {
                        if (i < 4) {
                            colDef.push(
                            {
                                field: columnNames[i],
                                displayName: columnNames[i],
                                width: '100',
                                // fix for highlighting first row in ui-grid
                                //cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents"   ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>',
                                cellClass: 'ui-grid-cell-contents',
                                cellStyle: { 'background-color': 'backgroundColor(row, true)' },
                                sortingAlgorithm: sort
                            });
                        }
                        else
                            colDef.push(
                            {
                                field: columnNames[i],
                                displayName: columnNames[i],
                                width: '100',
                                //cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>',
                                cellClass: 'ui-grid-cell-contents',
                                cellStyle: { 'background-color': 'backgroundColor(row, false)' },
                                sortingAlgorithm: sort
                            });
                    }

The above code allowed me to use both cellNav and cell custom style together.