iPad radio button issue within ionic popover - angularjs

Question

I am using radio buttons in a popover to create a dropdown type filter for my app.
When I use an iPad the radio buttons go haywire! This works perfectly on every other device.
Best illustration is in this video
https://www.youtube.com/watch?v=Begkz4uS8hQ
Here is my code:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="item bar-header bar-positive">
<h2 class="title">Difficulty</h2>
</div>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="" name="group">
<div class="item-content">
All
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Easy" name="group">
<div class="item-content">
Easy
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Medium" name="group">
<div class="item-content">
Medium
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Hard" name="group">
<div class="item-content">
Hard
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Expert" name="group">
<div class="item-content">
Expert
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</ion-content>
</ion-popover-view>
</script>
And displayed using this:
<button class="button button-positive button-small col col-20 icon-left ion-connection-bars filter-button" ng-click="popover.show($event)">
{{filter.difficulty || 'All'}}
</button>
Many thanks to anyone who can help.