Binding and Select

If you bind a checkbox (<input type="checkbox">) to a model property, the model property will be set to true if the checkbox is checked, and false if not.

If you need other values instead of true and false inserted into your model, you can use the ng-true-value and ng-false-value directives, like this:

 <input type="checkbox" ng-model="myForm.wantNewsletter"
                        ng-true-value="yes" ng-false-value="no" >

Binding Radio Buttons

Radio buttons are also easy to bind to model properties. If you have a group of radio buttons, just bind them all to the same model property. The radio button that is chosen will have its value copied into the model property. Here is an example:

<input type="radio" ng-model="myForm.whichNewsletter" value="weeklyNews">    
<input type="radio" ng-model="myForm.whichNewsletter" value="monthlyNews">    

Binding Select Boxes

Binding select boxes to model properties is reasonably straightforward too. Here is an example:

<div ng-controller="MyController" >
    <form>
        <select ng-model="myForm.car">
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
            <option value="fiat">Fiat</option>
        </select>
    </form>

    <div>
        {{myForm.car}}
    </div>
</div>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.myForm.car  = "nissan";
            } );
</script>

ng-options

Instead of using static HTML options you can have AngularJS create option elements based on data from the $scope object. You do so using the ng-options directive inside the select element. Here is an example:

<div ng-controller="MyController" >
    <form>
        <select ng-model="myForm.car"
                ng-options="obj.id as obj.name for obj in myForm.options">
        </select>
    </form>

    <div>
        {{myForm.car}}
    </div>
</div>

<script>
    angular.module("myapp", [])
        .controller("MyController", function($scope) {
            $scope.myForm = {};
            $scope.myForm.car  = "nissan";

            $scope.myForm.options = [
              { id : "nissan", name: "Nissan" }
             ,{ id : "toyota", name: "Toyota" }
             ,{ id : "fiat"  , name: "Fiat" }
             ];

        } );
</script>

The ng-options directive follows the following format:

optionBinding expression   dataSource expression

The dataSource expression speficies what data in the $scope object is to be used as data source for the option elements. In the example above, the dataSource expression is this part:

for obj in myForm.options

It defines obj as each object in the myForm.options array. Thus, an option element will be generated from each element in the myForm.options array in the $scope object.

The optionBinding expression specifies what properties are to be used as value and label for each option element. In the example above the optionBinding is this part:

obj.id as obj.name

This defines the obj.id property of each object as the value of each option element generated, and the obj.name property as the label. If you want the value and label to come from the same property, just leave out the as obj.name part (the label part of the expression).

You can call functions on the $scope object from inside both the optionBinding expression and dataSource expression. Here is an example:

obj.id as getLabelName(obj) for obj in getOptionArray()

This example will use the value returned from the getLabelName(obj) function call as label, and will iterate the objects returned by the getOptionArray() function call.

You can create option groups ( <optgroup> HTML elements with option elements inside) by adding a group by section to the optionBinding expression. Here is an example:

obj.id as obj.name group by obj.type

This example will group the generated option elements into optgroup elements using the obj.type property to determine which option elements to group together. Objects with the same value in the obj.type property will be grouped into the same optgroup element.

You can also iterate the properties of an object instead of iterating an array of objects. Here is an example:

propName as propValue for (propName, propValue) in objectWithProperties

This example will bind the property name as the option element value and the property value as the label, of all properties in the $scope.objectWithProperties object.

Empty Options

If the value set for a select box in the $scope object by the controller function does not match a value attribute of any of the option elements, AngularJS inserts an empty option element in the select box.

You can set a label for this empty option element by inserting an option element in the HTML, like this:

    <form>
        <select ng-model="myForm.car"
                ng-options="obj.id as obj.name for obj in myForm.options">
            <option value="">Please choose a car</option>
        </select>
    </form>

Selecting Multiple Options

If you need a select box that enables the user to choose multiple options, you need to insert the multiple="true" attribute inside the <select> element.

Once you enable multiple option selection, the data binding changes. Instead of binding the <select> element to a single string value, it is now bound to an array of values. Thus, you also set the selected values using an array. Here is an example showing that:

<div ng-controller="MyController" >
    <form>
        <select multiple="true" ng-model="myForm.car"
                ng-options="obj.id as obj.name for obj in myForm.options">
        </select>
    </form>

    <div>
        {{myForm.car}}
    </div>
</div>

<script>
    angular.module("myapp", [])
        .controller("MyController", function($scope) {
            $scope.myForm = {};
            $scope.myForm.car  = ["nissan"];

            $scope.myForm.options = [
              { id : "nissan", name: "Nissan" }
             ,{ id : "toyota", name: "Toyota" }
             ,{ id : "fiat"  , name: "Fiat" }
             ];

        } );
</script>