<!-- Available items listed as selections -->
<!-- Note: ng-hide is used for searching purposes -->
<div class="form-group col-md-5">
    <select class="form-control" multiple ng-multiple="true" id="dataEventItem"
    style="min-height: 200px;"
    ng-model="availableItems">
        <option ng-repeat="item in availableItems.data | orderBy:['item','company']" value="{{ item._id    }}" ng-hide="hideItem(item)">{{ item.product }} {{ item.company }}</option>
    </select>
</div>

<!-- Items selected in the first select, which is then shown in second select element -->
<div class="form-group col-md-5">
    <select class="form-control" multiple ng-multiple="true" id="dataEventAddedItem"
    style="min-height: 200px;"
    ng-model="addedItems">
        <option ng-repeat="item in items | orderBy:['product','company']" value="{{ item._id }}">{{ item.product }} {{ item.company }}</option>
    </select>
</div>

<!-- To move items from one select to another, I am basicly using splice and push, which is working, except for the empty element present in both <select> forms -->