I am currently designing a settings page for my planning poker app. I want the additional settings to be visible only if the "become scrum master" checkbox is checked. I have tried using ng-show but it's not working as expected. Here is my code snippet:
<section class="mainbar" ng-controller="gameSetupController">
<section class="matter">
<div class="container">
<h3>Create Game</h3>
<form class="form">
<div class="form-group">
<label for="project-selector">Project</label>
<select class="form-control" id="project-selector" ng-model="gameContext.project" ng-options="p.name for p in projects"></select>
</div>
<div class="form-group">
<label for="scrum-master-checkbox">Become Scrum Master</label>
<input id="scrum-master-checkbox" type="checkbox" ng-model="gameContext.isScrumMaster" />
</div>
<div id="scrum-master-options" ng-model="scrum-master-options" ng-show="scrum-master-options">
<div class="form-group">
<label>Card Options</label>
<input type="radio" ng-model="gameContext.cardType" value="fibonacci" />Fibonacci (1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144)
<input type="radio" ng-model="gameContext.cardType" value="modified" /> Modified Fibonacci (.5, 1, 2, 3, 5, 8, 13, 20, 40, 100)
</div>
<div class="form-group">
<label>Point Suggestion Method</label>
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="Average3" />Take average if all votes are within three cards
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="Mode" />Take the card selected most often by players
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="Average" /> Take average of all votes
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="None" />Do not suggest story points
</div>
<div class="form-group">
<label for="allowReselectCard">Allow Cards To Be Reselected</label>
<input id="allowReselectCard" type="checkbox" ng-model="gameContext.allowReselectCard" />
</div>
</div>
</form>
<a href="{{href()}}" class="btn btn-primary btn-lg" ng-disabled="gameContext.project.id === undefined" title="{{ gameContext.project.id === undefined ? 'Please select a project' : 'Join the ' + gameContext.project.name + ' game' }}">Join Game</a>
</div>
</section>