Mselect

These are the demos for the mselect directive. Same can be found in test.html in the code

$scope.iterable_1 = [1, 2, 3, 4, 5];

$scope.iterable_2 = [
    {display: 'apple', value: 'A'},
    {display: 'banana', value: 'B'},
    {display: 'cherry', value: 'C'},
    {display: 'date', value: 'D'}
]

Demo 1: simple array

All you need to use the directive is an array and a model to which you want the selected value assigned

<m-select m-repeat="iterable_1" m-model="model_1">
</m-select>

will render as

model_1:

Demo 2: Array of objects

You can use a m-item statement inside the m-select statement to specify how each of the items should be rendered. Use the variable $item to refer to the array item

<m-select m-repeat="iterable_2" m-model="model_2">
    <m-item>
        <span style="color:red;" ng-bind="$item.display"></span>
    </m-item>
</m-select>

will render as

model_2.display:

Demo 3: Array of objects. Assign an attribute of the array item to model

Use the attribute m-value on the m-select statement

<m-select m-repeat="iterable_2" m-model="model_3" m-value="$item.value">
    <m-item><span style="color:green;" ng-bind="$item.display"></span></m-item>
</m-select>
            

will render as

model_3:

Demo 4: Callback

If you want a callback for the controller

$scope.callback_4 = function(value){
    alert(value.display + ' selected')
}
            

<m-select m-repeat="iterable_2" m-model="model_4" m-onselect-callback="callback_4($item)">
    <m-item><span style="color:pink;" ng-bind="$item.display"></span></m-item>
</m-select>

Will render as

model_4.display:

More demos

click here for more undocumented demos. Viewing page source should tell you how stuff works!