Angularjs refreshing after action same page - angularjs

Question

I'm trying to load a function on a link click, which works perfectly. Then angularjs does its magic until it arrives on the point where it shows the user feedback. I need to refresh the page after deleting an item, but it simply won't refresh.
Here's my href:
<a ng-click="deleteGroup(group.id)" target="_self">
<img src="img/deleteGroupIcon.png" width="45px"/></a>
here's my Controller:
$scope.deleteGroup = function ($groupId) {
$http({
method: 'POST',
url: apiUrl + 'group/delete',
data: {'groupId': $groupId}, // pass in data as strings
//headers: {'Content-Type': 'application/x-www-form-urlencoded'}
// set the headers so angular passing info as
// form data (not request payload)
})
.success(function (data) {
if (!data.success) {
//$route.reload();
alert('groep is verwijderd');
} else {
$scope.group = data;
//$state.go('userDetail', {'user_id' : $userId});
}
});
};
and my html:
<div class="searchResults" ng-repeat="group in groups | searchForUser:searchString">
<div class="manageGroupWrapper">
<a class="normal" href="#">
<div class="newName h3">
{{group.title}}
</div>
<div class="newProfile">
<img ng-src="{{group.image}}" width="200px"/>
</div>
<div class="imageWrapper">
<a ui-sref="add_group" class="editGroupIcon"><img src="img/editGroupIcon.png" width="50px"/></a>
<a ng-click="deleteGroup(group.id)" target="_self"><img src="img/deleteGroupIcon.png" width="45px"/></a>
</div>
</a>
</div>

Answer 1

Your $scope.deleteGroup function should remove its target group from the $scope.groups so the content of the ng-repeat is automatically updated and does not display the group anymore.
$scope.deleteGroup = function (group) {
$http({
method: 'POST',
url: apiUrl + 'group/delete',
data: {'groupId': group.$groupId}, // pass in data as strings
//headers: {'Content-Type': 'application/x-www-form-urlencoded'}
// set the headers so angular passing info as
// form data (not request payload)
}).success(function(data) {
$scope.groups.splice($scope.groups.indexOf(group));
});
};

Answer 2

To force refreshing the page with uiRouter you can use $state.go(target, params, {reload: true}).
$scope.deleteGroup = function (group) {
$http({
method: 'POST',
url: apiUrl + 'group/delete',
data: {'groupId': group.groupId}, // pass in data as strings
//headers: {'Content-Type': 'application/x-www-form-urlencoded'}
// set the headers so angular passing info as
// form data (not request payload)
}).success(function(data) {
// This will reload the current state with the same stateParams
$state.go($state.current.name, $stateParams, {reload: true});
});
};