Angular ng-show not working on initial page load

Question

I'm using Angular's ng-show directive to alter how questions are displayed in a quiz, and then show a result on quiz completion. Everything works as expected except for the very first question. When the quiz loads I initialize $scope.image = false. For some reason both the div with ng-show="image" and the div with ng-show="!image" appear. I would expect only the div with ng-show="!image" to appear. Relevant code below. Note: to save space I did not include all my questions or results objects in the controller or the index.html where I include the proper ng-app headers, etc.:

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;
        }
    };
});

Answer 1

if you use ng-hide and ng-show together like that and ng-hide evaluates to false, my guess is that both divs should show. Have you tried just using one to make sure your methods are working properly and image has the right value? If so, add another div as a wrapper and use it for ng-hide so they dont fight each other.