Protractor - select item from dropdown menu

I have a dropdown menu with dynamic number of options, and I'm trying to chose an option using protractor framework. I see that this issue has been raised several times, but I didn't succeed with any of the proposed solutions.

<select id="VDS_select_customer_on_customer_whitelist_0" name="VDS_select_customer_on_customer_whitelist" 
class="selectpicker show-tick form-control bs-select-hidden" data-width="auto" data-style="btn btn-default btn-sm" 
data-live-search="true" title="Choose Customer...">
    <option class="bs-title-option" value="">Choose Customer...</option>
    <!-- ngRepeat: customer in collection.customers | orderBy:predicate -->
    <option ng-repeat="customer in collection.customers | orderBy:predicate" value="2" class="ng-binding ng-scope">customer0</option>
    <!-- end ngRepeat: customer in collection.customers | orderBy:predicate -->
    <option ng-repeat="customer in collection.customers | orderBy:predicate" value="1" class="ng-binding ng-scope">customer1</option>
    <!-- end ngRepeat: customer in collection.customers | orderBy:predicate -->
</select>
<div class="btn-group bootstrap-select show-tick form-control open" style="width: 196px;">
    <button type="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown" data-id="VDS_select_customer_on_customer_whitelist_0" title="Choose Customer...">
        <span class="filter-option pull-left">Choose Customer...</span>
        &nbsp;
        <span class="caret"></span>
    </button>
    <div class="dropdown-menu open" style="min-width: 0px; max-height: 451.011px; overflow: hidden; min-height: 42px;">
        <div class="bs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <ul class="dropdown-menu inner" role="menu" style="max-height: 399.011px; overflow-y: auto; min-height: 0px;">
            <li data-original-index="1" class="">
                <a tabindex="0" class="ng-binding ng-scope" style="" data-tokens="null">
                    <span class="text">customer0</span>
                    <span class="glyphicon glyphicon-ok check-mark"></span>
                </a>
            </li>
            <li data-original-index="2">
                <a tabindex="0" class="ng-binding ng-scope" style="" data-tokens="null">
                    <span class="text">customer1</span><span class="glyphicon glyphicon-ok check-mark"></span>
                </a>
            </li>
        </ul>
    </div>
</div>

In few examples that I found on the Internet is used by.xpath () method, but it didn't worked for me

    let openCustomers = element(by.xpath('//*[@id="customerWhitelistDetail"]/div[2]/div[1]/div/button'));
    openCustomers.waitReady();
    openCustomers.click();

    let customer = element(by.xpath('//*[@id="customerWhitelistDetail"]/div[2]/div[1]/div/div/ul/li[1]/a'));
    customer.waitReady();
    customer.click();