I am working with an Array of Objects, each containing an Array of strings. Utilizing ng-repeat to display all the strings, I have a button to switch to the next set of strings by changing the selected object in the outermost array. Below is the code snippet I am working with:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="quizRadioButton.css"/>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="quizAngularJs.js"></script>
<title>American History Quiz</title>
</head>
<body ng-app="myApp">
<div ng-controller="questionCtrl">
<form>
<h1>{{question}}</h1>
<ul>
<li ng-repeat="choice in choices"><input type="radio" name = "answer">{{choice}}</li>
<li>{{count}}</li>
</ul>
<button ng-click= "upCount()">Submit Form</button>
<button id='goBack'>Go Back</button>
</form>
</div>
</body>
Javascript
var myApp = angular.module('myApp', []);
function questionCtrl($scope){
var allQuestions = [....];
$scope.count = 0;
$scope.question = allQuestions[$scope.count].question;
$scope.choices = allQuestions[$scope.count].choices;
$scope.upCount = function(){
$scope.count = $scope.count + 1;
};
}
Each object in the array looks like this:
{
question: "question A",
choices: ["choice 1", "choice 2", "choice 3"],
correct answer: 0
}
I have verified that the count is updating correctly. However, even though the count is updating, the view is not refreshing. I have attempted to adjust my function as follows, but it did not resolve the issue:
$scope.upCount = function(){
$scope.count = $scope.count + 1;
$scope.question = allQuestions[$scope.count].question;
$scope.choices = allQuestions[$scope.count].choices;
};
Appreciate any assistance with this. Thank you.