How to show and hide paragraph when checkbox checked - angularjs

Question

I'm new to AngularJS. I need to show <p> when checkbox is checked = true. Currently <p> is showing when mouse hover-over. instead of that I need to show <p> when sendSMS is checked = true my code as follows,
<div class="col-xs-12">
<div class="form-group label-floating" ng-class="{'is-empty': vm.checkInData.telephone === null}">
<label for="phone" class="control-label">xxx-xxx-xxxx</label>
<input type="text" class="form-control" ng-model="vm.checkInData.telephone" id="phone"
ng-pattern="/^[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4}$/" name="phone" required>
<div ng-messages="vm.inputForm.phone.$error" ng-show="vm.formSubmitted || vm.inputForm.phone.$touched">
<div class="ngMessage" ng-message="required">Phone number is required.</div>
<div class="ngMessage" ng-message="pattern">Phone number should be a valid 10 digit one.</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.checkInData.sendSMS"> Receive text updates
</label>
</div>
<p class="help-block">Message &amp data rates may apply.</p>
</div>
</div>
</div>
How can I do that.

Answer 1

<p class="help-block" ng-if="vm.checkInData.sendSMS">Message &amp data rates may apply.</p>
you could toggle the visibility of the p tag by using the ng-if.