Annoying ion-radio behavior when deployed to iOS

ionic-v1
1

Here is the relevant HTML markup:

<ion-radio name="selectAddress" ng-model="selectAddress" ng-click="changeSelect()" ng-value="address.id">
	<p>{{address.address1}} {{address.aptSuite}}, {{address.zipCode}}</p>
</ion-radio>

After adding the ionRadio directive to remedy the iOS9 ~ selector problem, I added this bit of SCSS

.item-radio {
	input {
		&:checked {
			&+ .radio-content {
				.item-content {
					/* style the item content when its checked */
					background: #f7f7f7;
				}
				.radio-icon {
					/* show the checkmark icon when its checked */
					visibility: visible;
					padding: 11px 0px;
					position: absolute;
					visibility: visible;
					left: 5%;
					top: 25%;
					width: 25px;
					border: 2px solid black;
					height: 25px;
					&:before {
						background-color: #bc0711;
					}
				}
			}
		}
	}
	.radio-icon {
		/* Icon style for non-checked item */
		background-color: none;
	}
}

In Chrome, the radio button works as expected. The clicked radio shows the correct style.

But on iOS, the styles are reversed. The unselected radio is styled as checked. I have no idea what is causing this issue.

Also, it is worth noting that the ng-model value doesn’t change at all.

$scope.changeSelect = function() {
	console.log($scope.selectAddress)
}

The $scope.selectAddress value doesn’t change no matter how many times you change the selection.

2

Nevermind. I fixed this. Turns out the issue was that I wasn’t using the correct directive call in my HTML.

<ion-radio-fix name="selectAddress" ng-model="selectAddress" ng-click="changeSelect()" ng-value="address.id">
	<p>{{address.address1}} {{address.aptSuite}}, {{address.zipCode}}</p>
</ion-radio-fix>