Single select

Model: {{singleselectModel[0]}}

<multiselect
    ng-model="singleselectModel[0]"
    options="c for c in selectOptions"
    data-multiple="false"
></multiselect>

Single select pre-selection

Model: {{singleselectModel[1]}}

<multiselect
    ng-model="singleselectModel[1]"
    options="c for c in selectOptions"
    data-multiple="false"
></multiselect>

Single select with objects

Model: {{singleselectModel[2]}}

<multiselect
    ng-model="singleselectModel[2]"
    options="c.name for c in selectOptionsObjects"
    data-multiple="false"
></multiselect>

Single select pre-selection compare by object

Model: {{singleselectModel[3]}}

<multiselect
    ng-model="singleselectModel[3]"
    options="c.name for c in selectOptionsObjects"
    data-multiple="false"
></multiselect>

Single select pre-selection compare by id

Model: {{singleselectModel[4]}}

<multiselect
    ng-model="singleselectModel[4]"
    options="c.name for c in selectOptionsObjects"
    data-multiple="false"
    data-compare-by="id"
></multiselect>

Single select Long List, scroll after 5 rows

Model: {{singleselectModel[5]}}

<multiselect
    ng-model="singleselectModel[5]"
    options="c for c in selectOptionsLong"
    data-multiple="false"
    scroll-after-rows="5"
></multiselect>

Single select Long List, scroll after 5 rows, filter after 5 rows

Model: {{singleselectModel[5]}}

<multiselect
    ng-model="singleselectModel[5]"
    options="c for c in selectOptionsLong"
    data-multiple="false"
    scroll-after-rows="5"
    filter-after-rows="5"
></multiselect>

Single select, very long entries

Model: {{singleselectModel[6]}}

<multiselect
    ng-model="singleselectModel[6]"
    options="c for c in selectOptionsLongEntries"
    data-multiple="false"
    max-width="100"
></multiselect>

Multi select

Model: {{multiselectModel[0]}}

<multiselect
    ng-model="multiselectModel[0]"
    options="c for c in selectOptions"
    data-multiple="true"
></multiselect>

Multi select pre-selection

Model: {{multiselectModel[1]}}

<multiselect
    ng-model="multiselectModel[1]"
    options="c for c in selectOptions"
    data-multiple="true"
></multiselect>

Multi select with objects

Model: {{multiselectModel[2]}}

<multiselect
    ng-model="multiselectModel[2]"
    options="c.name for c in selectOptionsObjects"
    data-multiple="true"
></multiselect>

Multi select pre-selection compare by object

Model: {{multiselectModel[3]}}

<multiselect
    ng-model="multiselectModel[3]"
    options="c.name for c in selectOptionsObjects"
    data-multiple="true"
></multiselect>

Multi select pre-selection compare by id

Model: {{multiselectModel[4]}}

<multiselect
    ng-model="multiselectModel[4]"
    options="c.name for c in selectOptionsObjects"
    data-multiple="true"
    data-compare-by="id"
></multiselect>

Multi select headers

Model: {{singleselectModel[7]}}

<multiselect
    ng-model="multiselectModel[7]"
    options="c.name for c in selectOptionsObjectsHeader"
    data-multiple="true"
    data-header-key="header"
></multiselect>

Multi select dividers

Model: {{singleselectModel[8]}}

<multiselect
    ng-model="multiselectModel[7]"
    options="c.name for c in selectOptionsObjectsDivider"
    data-multiple="true"
    data-divider-key="divider"
></multiselect>

app.js:

angular.module("angular-bootstrap-multiselect-test", ["ui.multiselect"]).controller("index", function($scope) {
    $scope.singleselectModel= [
        "",
        "Apples",
        {},
        {
            id: 0,
            name: "Apples"
        },
        {
            id: 0,
            name: "Apples",
            bla: "blubb"
        },
        "",
        "",
		{},
		{}
    ];
    $scope.multiselectModel = [
        [],
        [
            "Apples",
            "Peaches"
        ],
        [],
        [
            {
                id: 0,
                name: "Apples"
            },
            {
                id: 2,
                name: "Peaches"
            }
        ],
        [
            {
                id: 0,
                name: "Apples",
                bla: "blubb"
            },
            {
                id: 2,
                name: "Peaches",
                bla: "blubber"
            }
        ]
    ];

    $scope.selectOptions = [
        "Apples",
        "Bananas",
        "Peaches"
    ];
    $scope.selectOptionsLong = [
        "Apples",
        "Bananas",
        "Peaches",
        "Apples2",
        "Bananas2",
        "Peaches2",
        "Apples3",
        "Bananas3",
        "Peaches3",
        "Apples4",
        "Bananas4",
        "Peaches4"
	];
    $scope.selectOptionsObjects = [
        {
            id: 0,
            name: "Apples"
        },
        {
            id: 1,
            name: "Bananas"
        },
        {
            id: 2,
            name: "Peaches"
        }
    ];
    $scope.selectOptionsLongEntries = [
        "ThisIsATestWithVeryLongEntries11111",
        "ThisIsATestWithVeryLongEntries22222",
        "ThisIsATestWithVeryLongEntries33333",
        "ThisIsATestWithVeryLongEntries44444",
        "ThisIsATestWithVeryLongEntries55555"
    ];
	$scope.selectOptionsObjectsHeader = [
		{
			name: "Fruits",
			header: true
		},
		{
			id: 1,
			name: "Bananas"
		},
		{
			id: 2,
			name: "Peaches"
		}
	];
	$scope.selectOptionsObjectsDivider = [
		{
			id: 1,
			name: "Bananas"
		},
		{
			divider: true
		},
		{
			id: 2,
			name: "Peaches"
		}
	];
});