How to reload the page in ui-router

Question

i have a delete button, for the confirmation from the user, i am using directive for modal.
this is the directive code

app.directive('modal', function() {
    return {
        template: '<div class="modal fade">' + '<div class="modal-dialog">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">&times;</button>' + '<h4 class="modal-title">{{ title }}</h4>' + '</div>' + '<div class="modal-body" ng-transclude></div>' + '</div>' + '</div>' + '</div>',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: true,
        link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;

            scope.$watch(attrs.visible, function(value) {
                if (value == true)
                    $(element).modal('show');
                else
                    $(element).modal('hide');
            });

            $(element).on('shown.bs.modal', function() {
                scope.$apply(function() {
                    scope.$parent[attrs.visible] = true;
                });
            });

            $(element).on('hidden.bs.modal', function() {
                scope.$apply(function() {
                    scope.$parent[attrs.visible] = false;
                });
            });
        }
    };
});

this is the controller code

 $scope.deletePlace = function(place) {

        if (place._id) {
            var url = '/api/places/' + place._id;
            $http.delete(url, {})
                .then(function(response) {
                    $scope.showModal = false;

                    $state.transitionTo('dashboard.places.list', null, { reload: true, inherit: true, notify: true }); 

                }, function(response) { // fail
                    $scope.errorMessage = true;
                });
        }
    }

after clicking ok button on delete modal, the modal will hide, but the black screen remains same and the buttons on page or not clickable, untill i refresh the page manually. Is there any way to remove the black screen after clicking ok button on confirmation modal. If i click the refresh manually, it will work. i don't want to refresh it manually. i want it to be refreshed automatically or from other way to hide the black screen.

Answer 1

1. Try $state.reload() It should work in most cases if you're using latest version of ui-router.
2. If that doesn't work try routing to the same page using $state.go() or $state.transitionTo() with additional parameter as {reload: true}.
3. If that also doesn't work create a auto executing method to initialize your controller and call that method again.

activate();

function activate(){
}