iPad Radio button issue in popover


#1

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

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.