Angularjs checkbox checked by default on load and disables Select list when checked

noob on stack overflow here. I am working on a webpage that has a transfer job function. This lets the user check a check-box to send the job back to the office, or select a technician from a list of all that are available. My question is how to setup the check-box so that it is checked by default when the page loads and have the select list disabled accordingly. Here is the code that I have for it at the moment:

<div ng-app="">
  Send to Office: <input type="checkbox" ng-model="checked" ng-checked="true"><br/>
  <select id="transferTo" ng-disabled="checked">
    <option>Tech1</option>
    <option>Tech2</option>
  </select>
</div>

and here is a jsfiddle for it: http://jsfiddle.net/hugmungus/LvHJw/5/

Currently, the page loads with the check-box checked, but the list is not disabled. If you un-check then re-check the it, the list becomes disabled.

Thanks for the help!

Solution 1:

If you use ng-model, you don't want to also use ng-checked. Instead just initialize the model variable to true. Normally you would do this in a controller that is managing your page (add one). In your fiddle I just did the initialization in an ng-init attribute for demonstration purposes.

http://jsfiddle.net/UTULc/

<div ng-app="">
  Send to Office: <input type="checkbox" ng-model="checked" ng-init="checked=true"><br/>
  <select id="transferTo" ng-disabled="checked">
    <option>Tech1</option>
    <option>Tech2</option>
  </select>
</div>

Solution 2:

Do it in the controller ( controller as syntax below)

controller:

vm.question= {};
vm.question.active = true;

form

<input ng-model="vm.question.active" type="checkbox" id="active" name="active">