Updating values being pulled from database using lou jquery multiselect

I am using lou's multiselect.js to update selected values that were previously stored in the database. I am getting the selected values from the database, however it's in the wrong column, as shown below. I would like to retrieve the values from the database that weren't selected(to be on the lef) along with those that have already been selected(to be on the right).

---

The list of items below(on the left) were already selected items being brought back from the database, but they should be under the Selected Product Types column instead. And then under Available Product Types the list of items that have not been selected as yet should be shown.

---

HTML

This gets the previously selected products from the database as shown in the picture above

<select multiple id="product-multi-select" name="product-multi-select" ng-model="input_doc_type.product" required>
    @foreach($inputDocData[0]->product as $data)
    <option value="" selected></option>
    @endforeach
</select>

---

JQuery

Gets all the products

<script type="text/javascript">
jQuery(function ($) {

    $("#product-multi-select").multiSelect({
        selectableHeader: "<div class='custom-header'>Available Product Types</div>",
        selectionHeader: "<div class='custom-header'>Selected Product Types</div>"
    });

    $(document).ready(function() {

        var products = [];

        $.get('/admin/products/all-products', function(data, response) {
            $.each(data, function(index, value) {
                products.push(value.name);
            });
            $("#product-multi-select").multiSelect('select', products);
            $(".ms-container").append('<i class="glyph-icon icon-exchange"></i>');
        });

    });

});
</script>

I'm not sure how to go about using this. Any assistance with this problem would be greatly appreciated.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2ko1BPj
via IFTTT