AngularJs, Bootstrap и Spring, проблемы с рендерингом/загрузкой веб-страниц

Недавно я начал работать над проектом Spring MVC, где для внешнего интерфейса я купил шаблон AngularJs и Bootstrap. Интеграция и настройка прошли нормально, но теперь, когда мне удалось внести некоторые данные во внешний интерфейс, я заметил некоторые визуальные проблемы с загрузкой страницы, которые возникают только тогда, когда я пытаюсь щелкнуть кнопки меню и, следовательно, перейти от одного представления к другому. Ниже я приложил 2 скриншота, на которых показано левое меню с 2 кнопками «Контакты» и «Управление группами».

Предполагая, что я нахожусь на странице «Контакты» и нажимаю кнопку «Управление группами» (или наоборот), когда страница загружает сетку с данными групп или контактов, на долю секунды я вижу некоторые проверки msg и выражений Angularjs, после чего страница загружается как обычно, без ошибок или чего-то подобного.

Я также тестировал в других браузерах, таких как Firefox и Explorer, но страница загружается как обычно. Кажется, что эта проблема возникает только тогда, когда я использую хром. Любая идея, как я могу это исправить?

Пример кода

<div class="panel-heading">
    <div class="row">
    <div class="col-md-6">
        <div ng-class="{'text-left': displayCreateContactButton == true, 'none': displayCreateContactButton == false}">
                <a ng-href="#addContactsModal"
               role="button"
               ng-click="resetContact();"
               title="<spring:message code='create'/>&nbsp;<spring:message code='contact'/>"
               class="btn btn-primary"
               data-toggle="modal">
                <i class="icon-plus"></i>
                &nbsp;&nbsp;<spring:message code="create"/>&nbsp;<spring:message code="contact"/>
            </a>
        </div>
</div>
    <div class="col-md-6">
        <p class="text-right" style="font-size:1.6em; margin-bottom:0"> Search <spring:message code='contacts.header'/> |
            <a ng-href="#searchContactsModal"
               id="contactsHeaderButton"
               role="button"
               ng-class="{'': displaySearchButton == true, 'none': displaySearchButton == false}"
               title="<spring:message code="search"/>&nbsp;<spring:message code="contact"/>"
               class="btn btn-sm btn-primary" data-toggle="modal">
                <em class="icon-magnifier"></em>
            </a></p>
    </div>
    </div>
</div>

<div class="panel-body">
    <div ng-class="{'alert alert-success alert-dismissible fade in': displaySearchMessage == true, 'none': displaySearchMessage == false}">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <strong><i class="fa fa-info-circle"></i>&nbsp;{{page.searchMessage}}</strong>&nbsp;

        <a role="button"
           ng-click="resetSearch();"
           ng-class="{'': displaySearchMessage == true, 'none': displaySearchMessage == false}"
           title="<spring:message code='search.reset'/>"
           class="btn btn-default" data-toggle="modal">
            <i class="icon-remove"></i> <spring:message code="search.reset"/>
        </a>
    </div>

    <div role="alert" ng-class="{'alert alert-success alert-dismissible fade in': displayMessageToUser == true, 'none': displayMessageToUser == false}">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <strong><i class="fa fa-info-circle"></i>&nbsp;{{page.actionMessage}}!</strong>.
    </div>

    <div ng-class="{'alert alert-block alert-error': state == 'error', 'none': state != 'error'}">
        <h4><i class="fa fa-info-circle"></i> <spring:message code="error.generic.header"/></h4><br/>

        <p><spring:message code="error.generic.text"/></p>
    </div>

    <div ng-class="{'alert alert-info': state == 'noresult', 'none': state != 'noresult'}">
        <h4><i class="fa fa-info-circle"></i> <spring:message code="contacts.emptyData"/></h4><br/>

        <p><spring:message code="contacts.emptyData.text"/></p>
    </div>

    <div id="gridContainer" ng-class="{'': state == 'list', 'none': state != 'list'}">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th scope="col"><spring:message code="contacts.name"/></th>
                <th scope="col"><spring:message code="contacts.email"/></th>
                <th scope="col"><spring:message code="contacts.phone"/></th>
                <th style="text-align:center" scope="col">#Action</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="contact in page.source">
                <td class="tdContactsCentered">{{contact.name}}</td>
                <td class="tdContactsCentered">{{contact.email}}</td>
                <td class="tdContactsCentered">{{contact.phoneNumber}}</td>
                <td class="width15">
                    <div class="text-center">
                        <input type="hidden" value="{{contact.id}}"/>
                        <a ng-href="#updateContactsModal"
                           ng-click="selectedContact(contact);"
                           role="button"
                           title="<spring:message code="update"/>&nbsp;<spring:message code="contact"/>"
                           class="btn btn-sm btn-warning" data-toggle="modal">
                            <i class="icon-pencil"></i>
                        </a>
                        <a ng-href="#deleteContactsModal"
                           ng-click="selectedContact(contact);"
                           role="button"
                           title="<spring:message code="delete"/>&nbsp;<spring:message code="contact"/>"
                           class="btn btn-sm btn-danger" data-toggle="modal">
                            <em class="fa fa-trash"></em>
                        </a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>