ng-hide ng-show not working as it should

Question

I am building a quiz in angular and Im trying to show a button based on whether the quiz has started. User go to their users page when logged in, and when they havent started the quiz i want to show the "start quiz" button. During the quiz they can go their users page, but then only "resume quiz" should be visible.

As my final test I dumbed it down to this. In my controller I specifically declare:

vm.started = false;

Then in the html file I use this logic:

    <button ng-hide"reg.started" ng-click="reg.startQuiz()">Start quiz</button>
    <button ng-show"reg.started" ng-click="reg.resumeQuiz()">Resume quiz</button>

So you would assume, since started is set to false, only the start quiz button would show up. However, both buttons keep show up, and I cant seem to be able to fix it. When i do a console.log on vm.started it says false. The ng-click works fine. Using a function instead (returning a boolean) does not work either.

Answer 1

are you sure you didn't forget the "="?

<button ng-hide="reg.started" ng-click="reg.startQuiz()">Start quiz</button>
<button ng-show="reg.started" ng-click="reg.resumeQuiz()">Resume quiz</button>