AngularJS Bootstrap checkbox not checking on click

Question

I have a checkbox I am using in my AngularJS/Bootstrap application and the issue i'm facing is that when I click on it when it's unchecked, it's not showing the checkmark. The toggleVal() method is being called though and it's executing the steps but it's not showing the check mark. Also, my scope variable myvar is either a 0 or a 1 and I want to display it accordingly.

<a href class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between mt-2"> <input ng-click="toggleVal()" class="form-check-input ml-2" type="checkbox" ng-model="myvar" ng-checked="myvar" ng-true-value="1" ng-false-value="0"> </div> </a> 

-- Update: So I have added some additional details including updated code. The checkbox is inside a Bootstrap list group item which may be affecting the selection.

Answer 1

The problem is anchor tag. When you click on checkbox actually you click on anchor tag too. So this means your checkbox clicked twice in each click.

To fix the problem simply add href="Javascript:void(0);" to your anchor tag.

 <a href="Javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between mt-2"> <input class="form-check-input ml-2" type="checkbox" ng-model="myvar" ng-checked="myvar == 1" ng-true-value="1" ng-false-value="0"> </div> </a> 

Here is working sample.