HTML-коды в заголовке данных для форматированного текста

Я пытаюсь использовать модальный диалог Bootstrap и jQuery. Данные поступают из заголовка данных якоря. Но в заголовке данных текст должен быть отформатирован как HTML-теги.

Вот коды:

<a class = "thumbnail" href = "#" data-image-id = "" data-toggle = "modal" data-title = "Some title" data-caption = "<p>DATA CAPTION</p>" data-image = "img.jpg" data-target = "#image-gallery">

Кстати, модальный код:

<div class = "modal fade" id = "image-gallery" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
            <div class = "modal-dialog">
                <div class = "modal-content">
                    <div class = "modal-header">
                        <h4 class = "modal-title" id = "image-gallery-title"></h4>
                        <button type = "button" class = "close" data-dismiss = "modal"><span aria-hidden = "true">×</span><span class = "sr-only">Kapat</span></button>
                    </div>
                    <div class = "modal-body">
                        <img id = "image-gallery-image" class = "img-fluid" src = "">
                    </div>
                    <div class = "modal-footer">

                        <div class = "col-md-2">
                            <button type = "button" class = "btn btn-primary" id = "show-previous-image">Geri</button>
                        </div>

                        <div class = "col-md-8 text-justify" id = "image-gallery-caption">
                            This text will be overwritten by jQuery
                        </div>

                        <div class = "col-md-2">
                            <button type = "button" id = "show-next-image" class = "btn btn-default">İleri</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Обновлено: коды jquery:

$(document).ready(function(){
    loadGallery(true, 'a.thumbnail');

});

function loadGallery(setIDs, setClickAttr){
    var current_image,
        selector,
        counter = 0;

    $('#show-next-image, #show-previous-image').click(function(){
        if ($(this).attr('id') == 'show-previous-image'){
            current_image--;
        } else {
            current_image++;
        }

        selector = $('[data-image-id = "' + current_image + '"]');
        updateGallery(selector);
    });

    function updateGallery(selector) {
        var $sel = selector;
        current_image = $sel.data('image-id');
        $('#image-gallery-caption').text($sel.data('caption'));
        $('#image-gallery-title').text($sel.data('title'));
        $('#image-gallery-image').attr('src', $sel.data('image'));
        disableButtons(counter, $sel.data('image-id'));
    }

    if (setIDs == true){
        $('[data-image-id]').each(function(){
            counter++;
            $(this).attr('data-image-id',counter);
        });
    }
    $(setClickAttr).on('click',function(){
        updateGallery($(this));
    });
}

Все нормально, кроме форматирования текста. «<p>DATA CAPTION</p>» отображается как текст, а не как HTML.

Как мне сделать форматированный текст в модальной подписи?