Deleting row with scope array leaves blank page - arrays

Question

Trying to refresh the view with scope array after deleting a row from database I have no luck:
$scope.remove = function() {
var x = document.getElementById("name").textContent;
$cordovaSQLite.execute(db, 'DELETE from table WHERE name=?', [x])
.then(function(res) {
var index = $scope.listItems.indexOf(x);
$scope.listItems.splice(index, 1);
}, function(error) {
console.log(error.message);
})
};
Delete succeeds but leaves me a blank page. To refresh in my Ionic app I have to go to another page and back:
$scope.showConfirm = function () {
var x = document.getElementById("name").textContent;
var confirmPopup = $ionicPopup.confirm({
title: 'Deleting Journal Entry',
template: 'Are you sure you want to delete this item ?'
});
confirmPopup.then(function (res) {
if (res) {
var query = "DELETE FROM chocolates where name = ?";
$cordovaSQLite.execute(db, query, [x]);
$state.go($state.current, $stateParams, {reload: true, inherit: false});
console.log(x);
} else {
console.log('You are not sure');
};
});
};
This code also succeeds deleting the row but the refresh function is not working. I tried answers from alternative 1 and alternative 2.

Answer 1

if (res) {
$ionicPlatform.ready(function () {
$scope.chocolates = [];
var query = "DELETE FROM chocolates where name = ?";
$cordovaSQLite.execute(db, query, [x]);
$cordovaSQLite.execute(db, 'SELECT * FROM chocolates ORDER BY choc_id DESC LIMIT 1', []).then(function (res) {
if (res.rows.length > 0) {
for (var i = 0; i < res.rows.length; i++) {
$scope.chocolates.push(res.rows.item(i));
}
}
}, function (err) {
console.error(err);
});
$scope.$apply();
});
} else {
console.log('You are not sure');
};
This is the solution.