Angular state.go not refreshing page thus not showing the selected radio button

Question

I am making a mobile exam app. The questions are multiple choice type. I have previous and next question buttons. It's using $state.go to transition to the same HTML page but with a different question and choices.

// this function is in a service and the service is used by the controller 
this.switchTemplateHTML = function(type, category) {
    if(type == "multiple") {
        $state.go("test-item-multiple-choice", {categoryParam: category.category_name, questionPointer: self.questionIndexPointer});
    }
}

The questions are stored in an array of objects containing the question, the choices (array), and the user's answer (index of the choice). To go to the previous or next question, I have this code in the controller:

$scope.nextQuestion = function() {
    if(service.questionIndexPointer+1 < $scope.questions.length) {
        service.questionIndexPointer++;
        service.switchTemplateHTML($scope.questions[service.questionIndexPointer].type, $scope.category);
    }
};

$scope.previousQuestion = function() {
    if(service.questionIndexPointer > 0) {
        service.questionIndexPointer--;
        service.switchTemplateHTML($scope.questions[service.questionIndexPointer].type, $scope.category);
    }
};

I have $scope.init function inside the controller. The scope.init is called every time when going to the next question. It loads the category, questions, and choices depending on the $stateParams.categoryParam. Also inside it is this code:

// When clicking on a radio button choice, the answer to the current question is updated
$scope.$watch('radioChoice.choice', function(newval, oldval) {
        if(typeof newval != 'undefined') {
            if($scope.currentQuestion != null) {
                $scope.currentQuestion.usersAnswer = newval;
            }
        }
    });

Also this:

// Watch the function that returns service.timerInString
    // Directly watching service.timerInString doesn't work
    $scope.$watch(function() {
        return service.timerInString;    
    }, function(newval, oldval) {
        $scope.time = newval;

        // Not relevant
        if(newval === "00:00") {
            service.getCategory($scope.category.category_name).categoryIsFinish = true;
            var alertTimeup = $ionicPopup.alert({
                template: '<center>Your time is up!</center>'
            });
            alertTimeup.then(function(res) {
                service.stopTimer();
                service.saveAnswersInCategory();
                $scope.time = '00:00';
                $state.go("home");
            });
        }

        // I added this so that the radio button is SUPPOSED to be selected when going back to a question that has been answered
        if(typeof $scope.currentQuestion.usersAnswer != 'undefined') {
            $scope.radioChoice.choice = $scope.currentQuestion.usersAnswer;
        }
    });

Now here's the problem: When I go to the previous questions that have been already answered, they don't show which is selected (but if you console.log the current question it has an answer). But when I go to the next question that was already answered, it shows the selected answer. I put a console.log inside the $scope.init() function and it prints in the console every time you click the next question button, but it doesn't print when clicking the previous question button so it means the init() function is not called when going. How come it doesn't get called, I have the same state.go that differs only in question index pointer. I also tried adding {reload:true, inherit:false} in the state.go params (according to what I researched) but it also doesn't work.

Answer 1

Add $ionicConfigProvider.views.maxCache(0); to the config.