Utilizing Angular's ng-show directive to adjust the display of questions in a quiz and show a result upon completion, everything is functioning as intended except for the initial question. Upon loading the quiz, $scope.image is initialized as false. Surprisingly, both the div with ng-show="image" and the div with ng-show="!image" are visible. The expected behavior would be for only the div with ng-show="!image" to be displayed. Relevant code snippet provided below. Please note that I have omitted some parts of my controller and index.html for brevity:
html:
<div class="jumbotron text-center" ng-hide="quizComplete" ng-show="!image">
<h3>{{ questions[number].ask }}</h3>
<div class="row">
<div ng-repeat="answer in questions[number].answers" class="choice">
<div ng-click="recordChoice(answer.points)">
<span class="centerer"></span>
<span class="centered">{{ answer.choice }}</span>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" ng-hide="quizComplete" ng-show="image">
<h3>{{ questions[number].ask }}</h3>
<div class="row">
<div ng-repeat="answer in questions[number].answers" class="choice">
<div ng-click="recordChoice(answer.points)">
<img ng-src="/img/{{ answer.img }}.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" ng-show="quizComplete">
<h2>{{ results[result].title }}</h2>
<p>{{ results[result].details }}</p>
</div>
controller:
angular.module('NerdCtrl', []).controller('NerdController', function($scope, $routeParams) {
$scope.questions = [{"ask": "Choose a Social Media platform:", "answers": [{"choice": "Facebook", "points": 2, "img": "Facebook"}, {"choice": "Twitter", "points": 3, "img": "Twitter"}, {"choice": "Google+", "points": 1, "img": "GooglePlus"}]}];
$scope.results = [{title: "The Mummy", details: "You are the original..."}];
$scope.number = 0;
$scope.tallyMummy = 0;
$scope.tallyFrankenstein = 0;
$scope.tallyWolfman = 0;
$scope.tallyJeckyll = 0;
$scope.image = false;
$scope.quizComplete = false;
$scope.recordChoice = function(points) {
if ($scope.number < 9) {
switch(points) {
case 1:
$scope.tallyMummy++;
break;
case 2:
$scope.tallyFrankenstein++;
break;
case 3:
$scope.tallyWolfman++;
break;
case 4:
$scope.tallyJeckyll++;
break;
}
$scope.number++;
if ($scope.number === 1 || $scope.number === 6 || $scope.number === 7 || $scope.number === 9) {
$scope.image = true;
} else {
$scope.image = false;
}
} else {
$scope.quizComplete = true;
$scope.result = 0;
}
};
});