Bootstrap Tagsinput не возвращает элементы объекта

Я использую Bootstrap Tagsinput, и он отлично работает. Однако недавно я попытался изменить его, чтобы он возвращал объект (идентификатор и текст), а не просто текст, но это не сработало. Он продолжает возвращать [object, object] без фактических данных.

HTML:

<select multiple class="form-control" id="countryList"  onclick="addToTagsInput();" >
    <option value="AFG">Afghanistan</option>
                    .
                    .
</select>

<input class="form-control" type="text" id="sc">

JavaScript:

function addToTagsInput(){
    $('#sc').tagsinput({
        itemValue: 'CountryCode',
        itemText: 'CountryName'
    });
    $('#sc').tagsinput('add', { CountryCode: document.getElementById('countryList').value, CountryName: document.getElementById('countryList').options[document.getElementById('countryList').selectedIndex].text });
}

$('#sc').on('itemAdded', function(event) {
    alert($("#sc").tagsinput('items'));//same results if I use console.log
});

Где:

document.getElementById('countryList') — это список со списком стран мира, который имеет значение из трех кодовых букв для страны и текста названия страны.

Обратите внимание, что значение и текст, которые я получаю из списка, проверены на правильную работу.