ng-model preventing checked="checked" to select radio button by default

Question

When I use checked="checked" ng-model prevents the radio button from being selected by default. Does anyone know what could be causing this?

<input type="radio" name="unitMiles" checked="checked" id="unitMiles" value="Miles" ng-model="unit" ng-change='nextActivityStep(3)'>

Answer 1

You should be using the ngChecked directive that comes with Angular.

Doc: http://docs.angularjs.org/api/ng.directive:ngChecked

Answer 2

You can set your model to the value of your input ($scope.unit = "Miles" in the case) or use ng-checked="true" in your input.

Answer 3

As I commented on the accepted answer (as of writing), the ngChecked and ngModel directives shouldn't be used on the same element.

If you're using ngModel, then the checked status of the input is only a reflection of the model. To set your radio input to true by default, simply set the model accordingly.

Using the code from the OP, where the value is 'miles' and the model is units, and assuming these are scope variables, you would do something along the lines of $scope.units = 'miles' in the associated controller (or wherever).