DropDown not render in UI Grid angular js - angularjs

Question

My view have below code section but when user click on cell edit option is avilable but in textbox instead-of dropdown list:
<div id="grdAreaDetails" ui-grid="gridOptions" class="grid" ui-grid-edit ui-grid-row-edit></div>
And controller is below
$scope.cellSelectEditableTemplate = '<select ng-model="COL_FIELD" ><option value="volvo">Volvo</option><option value="saab">Saab</option></select>';
$scope.maxLength = 200;
$scope.sites = [];
$scope.showloadingdiv = true;
$scope.isAreaAddPanelHide = false;
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{
name: 'code', field: 'code', enableCellEditOnFocus: true,
editableCellTemplate: $scope.cellSelectEditableTemplate
},
{ name: 'name',field:'name'},
{ name: 'notes',field:'notes'},
{ name: 'description', field: 'description' },
{ name: 'siteid', field: 'siteid' },
{ name: 'status',field:'status' }
];
$scope.gridOptions = {
data: $scope.AreaRecord,
multiSelect: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.UpdateArea);
}
}

Answer 1

Just Remove enableCellEditOnFocus: true and add " enableCellSelection: true"
And let me know what happens.
$scope.gridOptions.columnDefs = [
{
name: 'code', field: 'code' , enableCellSelection: true,
editableCellTemplate: $scope.cellSelectEditableTemplate
},
{ name: 'name',field:'name'},
{ name: 'notes',field:'notes'},
{ name: 'description', field: 'description' },
{ name: 'siteid', field: 'siteid' },
{ name: 'status',field:'status' }
];
If this doesn't work then make fiddle.