Angular - how to force a radio to be checked on page load

Question

Simple question I hope...

How do I enable on page load that the first radio is checked with the html below?

            <div class="app-margin-bottom app-margin-left">
                <input type="radio"
                       value="pdf"
                       ng-model="resource.type"
                       ng-click="enableUrlInput()"
                       name="resourceType"
                       required>
                    <span class="app-margin-right">PDF</span>
                <input type="radio"
                       name="resourceType"
                       ng-model="resource.type"
                       ng-click="enableUrlInput()"
                       value="url"
                       required> URL
            </div>

I have tried using checked as an attr but this gets ignored. I've also played around with setting resource.type to 'pdf' with the directive ng-checked.

http://stackoverflow.com/questions/5592345/how-to-select-a-radio-button-by-default — Marcus Höglund, Sep 23 '16 at 15:20

Bartosz Gajda · Accepted Answer · 2016-09-23T15:40:02.140

This should work

<div ng-controller="MyCtrl">
  <div class="app-margin-bottom app-margin-left">
                <input type="radio"
                       value="pdf"
                       ng-checked="true"
                       ng-model="resource.type"
                       ng-click="enableUrlInput()"
                       name="resourceType"
                       required>
                    <span class="app-margin-right">PDF</span>
                <input type="radio"
                       name="resourceType"
                       ng-model="resource.type"
                       ng-click="enableUrlInput()"
                       value="url"
                       required> URL
            </div>
</div>

JSFiddle: http://jsfiddle.net/Lvc0u55v/9955/

Angular - how to force a radio to be checked on page load

1 Answers1