Unable to display right tick mark in checkbox in tablets and iPad - ipad

Question

I have following code, it displays check mark ticked on desktop. But doesn't work on iPad and tablets. Functionality is working but right mark is not shown.
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 borderAtRight"
<!-- Dropdown and Menu -->
<div class="btn-group topFilterCtrl filterDropdn" dropdown
dropdown-append-to-body
id="ddlStatus">
<div id="btn-append-to-body" type="button"
class="btn btn-primary panelTextFont14 noBorder"
dropdown-toggle>
Status<span class="caret caretSpan"></span>
</div>
<ul class="dropdown-menu dropDownLabel" role="menu"
aria-labelledby="btn-append-to-body"
ng-show="!vm.showthis">
<div class="customScroll">
<li role="menuitem" class="changeColorOnHover"
ng-repeat="optionThis in vm.List track by $index"
ng-show="list.value != null">
<a href="#">
<div class="checkbox" id="{}index}"
ng-show="this.value != null"
ng-click="vm.applyFilterForResultCount()"
ng-change="vm.getCount(this)"
ng-model="this.flag">
<label>
<input type="checkbox"
ng-click="vm.clickStatusCheckBox(this);$event.stopPropagation();"
ng-show="this.value != null"/>
{{this.value}}
</label>
</div>
</a>
</li>
</div>
<!--Clear div-->
<li role="menuitem" class="btn btn-default buttonli"
ng-click="vm.clearAll()">
<a href="#">
<p>
<span class="clearAllBtn">Clear</span>
<span class="dropDownBtnItem"> – All </span>
</p>
</a>
</li>
</ul>
</div>
</div>
.topFilterCtrl{
text-align: left;
vertical-align: middle;
padding-top: 8%;
padding-bottom: 0%;
border-radius: 0;
margin-top: 0%;
box-shadow: none;
outline: none;
border:none;
width:100%;
}
portrait:
div.borderAtRight .filterDropdn{
padding-top:14%;
}
.filterDropdn{
padding-top: 10%;
height: 50px;
max-height: 50px;
overflow: hidden;
}
.noBorder{
text-align: left;
width:#full-width;
box-shadow: none;
outline: none;
min-width: 80%;
padding: 0;
height: auto;
min-height: 36px;
border-top-color: none;
border-top-style: none;
border-top-width: none;
border-right-color: none;
border-right-style: none;
border-right-width: none;
border-bottom-color: none;
border-bottom-style: none;
border-bottom-width: none;
border-left-color: none;
border-left-style: none;
border-left-width: none;
}
.dropDownLabel{
margin:0 0 0 -16px;
}
.customScroll{
height: auto;
overflow-x: hidden;
max-height:360px;
}
.customScroll>li>a,
.customScroll>li>a:hover,
.customScroll>li>a:active,
.customScroll>li>a:focus {
display: block;
padding: 1px 22px;
clear: both;
white-space: nowrap;
text-decoration : none;
}
.buttonli {
border-left: 0;
border-right: 0;
border-radius: 0;
margin: 2px 0px 2px 0px;
width: 100%;
background-color:#E4EAEF;
}
li.buttonli > a > p{
margin-bottom:0;
}
input[type="checkbox"]{
-webkit-appearance: checkbox;
}
I found this: https://github.com/angular-ui/bootstrap/issues/2017
But not sure how do I implement it, where should I really include this directive in my code as I am very new to AJS?

Answer 1

The checkbox may not display correct because the input element is nested inside the label element (even though it may be allowed, it confuses the purposes of the input and the label).
If the issue is about the checkbox not being checked by default, you might need to check out the ng-checked="expression" syntax for Angular.