Angular ui-grid adding new row dynamically

I am having a problem with the newly added row. It inherit the row in the grid (the buttons and behavior). The code is working adding a new row but I want a new row with the behavior in the AddOverride() function. Like a button with save and cancel button. Also when I add a new row. the new row >has the update and delete button. When I try to click update on the newly >added row, it is calling the service for updating.

enter image description here

HTML

   <button  id="addNew" ng-click="addOverride()" type="button" class="btn 
btn-primary">Add Rank</button>      
                <div ui-grid-auto-resize ui-grid="gridOptions" ui-grid-
pagination class="gridRank" style="height: 370px !important;"></div>

Populating Grid

$scope.gridOptions = {             
            columnDefs: [
                { 
                    field: 'rankID', displayName: '', visible: false
                },
                {
                    name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
                    cellTemplate: '<div  ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350

                },
                 {
                     field: 'createTime', displayName: 'Create Time', cellFilter: 'date:'yyyy-MM-dd'', width: 200
                 },
                {
                    field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                },                   
                 {
                     field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:'yyyy-MM-dd'', width: 200
                 },
                {
                    field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                },
            {
                name: 'Action', field: 'edit', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
                cellTemplate: '<div><button ng-show="!row.entity.editrow"  ng-click="grid.appScope.edit(row.entity)"><span class="glyphicon glyphicon-edit"></span></button>' + ' ' + //Edit Button                                   
                               '<button ng-show="row.entity.editrow" ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
                               '<button ng-show="row.entity.editrow"  ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
                               '<button ng-show="!row.entity.editrow" ng-click="grid.appScope.Delete(row.entity)"><span class="glyphicon glyphicon-trash"></span></button>' + ' ' + //Delete Button
                               '</div>', width: 75
            }],
            data: response.data.resultLists.cookRankList,
            paginationPageSizes : [10, 20, 30],
            paginationPageSize : 10,
            multiSelect: false
        };

ADDING OF NEW ROW

$scope.addOverride = function () {
            var emptyData = [
                 {
                     field: 'rankID', displayName: '', visible: false
                 },
                  {
                      name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
                      cellTemplate: '<div  ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350

                  },
                  {
                      field: 'createTime', displayName: 'Create Time', cellFilter: 'date:'yyyy-MM-dd'', width: 200
                  },
                  {
                      field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                  },
                  {
                           field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:'yyyy-MM-dd'', width: 200
                  },
                  {
                           field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                  },
                  {
                    name: 'Action', field: 'add', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
                    cellTemplate: '<div><button  ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
                                   '<button ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
                                   '</div>', width: 75
                }

            ];
            $scope.gridOptions.data.unshift(emptyData);
         };

Source: AngularJS