bootstrap-select not selecting the correct item

Question

I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.

Plunker is setup here:

http://plnkr.co/edit/MRYOkW?p=preview

(code is in dashboard.html and dashboard.js)

That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.

<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic"   bootstrap-dropdown >
    <option>Contains</option>
    <option>Greater Than</option>
    <option>Less Than</option>
    <option>Equal To</option>
</select>

Answer 1

You missed to add value attribute on your options that would set value of ng-model on select of any option

<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" bootstrap-dropdown>
    <option value="">Contains</option>
    <option value="Greater">Greater Than</option>
    <option value="Less">Less Than</option>
    <option value="Equal">Equal To</option>
</select>

Update

If you want to render select option dynamically I'd refer you to use ng-options which support select perfectly. You can select object on selection of option

Demo here

Answer 2

problem is you can't add option value property . either set value property or generate this using ng-repeat option

Answer 3

Above answer must be the right answer but, It seems like you had an unwanted empty option an it was messing the index. By adding a real one it started to work.

<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic"   bootstrap-dropdown >
        <option></option>
        <option>Contains</option>
        <option>Greater Than</option>
        <option>Less Than</option>
        <option>Equal To</option>
</select>