AngularJS - Draw a Select with a default option

In the following example, we set a default option for our users to see. We could leave it blank but it would not help our user. We could also preselect one of our options as the default one but sometimes we do not want to influence or dictate our user's selection.

    <form name="myForm">
      <select ng-options="color for color in ['red', 'blue', 'yellow']" ng-model="color1">
        <option value="" selected>--Please select your color--</option>
      </select>
    </form>

Note: it is important that our default options has value set to nothing.

Useful links:

• AngularJS Docs: select

Working Example: Plunkr

AngularJS - Checkbox Default Value

In the following example, we set the values for our checkbox using ng-checked. The default values are set using ng-init; the same result is accomplished by initializing the value in the controller. When the user marks the checkbox as checked, we use the ng-click to change the value from true to false, or vice versa.

<div ng-init="options={};options.one.selected=true">
       <input id="option_1" type="checkbox" 
                   ng-click="options.one.selected=!options.one.selected" 
                   ng-checked="options.one.selected">
       <label for="option_1" >Option 1</label>
 </div>

Note: ng-checked expects an expression and it does not work with ng-model in the same element.

Useful links:

• AngularJS Docs: ngChecked

Working Example: Plunkr