how to show/hide a div on the basis of a checkbox selection in angular js

Question

I have a checkbox and a div on my page.

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"                              ng-checked="ModelData.Animals == 'A'" />    <div class="form-group" ng-show="ModelData.Animals == 'A'">                          <label for="FirstName" class="col-md-9">                             Are you interested in Animal Liability Coverage?                         </label>                         <div class="col-md-3">                             <label>                                 <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"                                     value="Y" />                                 Yes                                 <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"                                     value="N" />                                 No                             </label>                         </div>   </div> 

I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.

Answer 1

Have you tried it this way? Here's the fiddle It works great.

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" /> <div class="form-group" ng-show="ModelData.Animals">   <label for="FirstName" class="col-md-9">     Are you interested in Animal Liability Coverage?   </label>   <div class="col-md-3">     <label>       <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes       <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No     </label>   </div> </div> 

Answer 2

I think you are looking for ng-true-value and ng-false-value

<div ng-app>     <div >         <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>             </div>      <div ng-show="check == 'A'">         Checked     </div> </div> 

Fiddle