Аккордеон внутри модального по умолчанию закрыт только тогда, когда страница загружена - Bootstrap & AngularJS

Question

У меня есть таблица, и в каждой строке есть кнопка ShowXml, которая открывает модальное окно.И в каждом модале у меня есть гармошка, которая имеет 2 разборных (XML1-XML2).Я хочу, чтобы все складные части гармошки закрывались всякий раз, когда я нажимал кнопку ShowXml.Если я нажимаю кнопку ShowXml в любой строке, по умолчанию эти две складные позиции закрываются.Но если я закрою этот модал и нажму другой ShowXml (тот же или любые другие строки), то откроется последний разборный, открытый в последнем модале.(не контекст, например, если я щелкаю XML1 в первых строках, затем закрываю модальные и открываю другие строки ShowXml, а затем открывается разборный XML1).

Вот мой HTML для модальных:

<code><div id="myModal" class="modal fade" role="dialog" tabindex="-1"
    ng-If="isModalActive">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    data-target="#myModal" ng-click="closeModal()">&times;</button>
                <h4 class="modal-title"> XML1 & XML2 </h4>
            </div>
            <div class="modal-body" style="text-align: left">

                <div class="panel-group" id="accordion">

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title" style="text-align: center">
                                <dt>XML1</dt>
                                <a data-toggle="collapse" data-parent="#accordion"
                                    href=#collapse1><span
                                    class='glyphicon glyphicon-chevron-down'></span></a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse">
                            <div class="panel-body" style="text-align: left">
                                <button class="button buttonC" ngclipboard
                                    data-clipboard-target="#xmlrequest">Copy to Clipboard</button>

                                <?prettify?>
                                <pre class="prettyprint" id=xmlrequest> {{xmlmess.xml1}}

XML2 Копировать в буфер обмена {{}} xmlmess.xml2

Модал закрывается тремя способами: кнопка закрытия (x), esc и при нажатии вне модального окна.

Для кнопки закрытия я держал логическую переменную области видимости в функции closeModal () в файле .js и вызывал эту функцию с помощью ng-click и т. Д. ... Это работает, но у меня есть вопрос:

• есть ли лучший / более короткий способ сделать это?Потому что на данный момент она работает только для кнопки закрытия, поэтому мне нужно что-то сделать для модема esc и outside.

Если это так, можете ли вы дать мне идею для реализации этого для esc и outside модального типа.