grails - grails angularjs - モーダルが期待どおりに機能しない

Question

ユーザーが奨励ボタンをencouragementModalクリックしたときにのみmodal( ) を表示したい。

構成

GSP ビュー_encourage.gspは次のとおりです。

<div ng-controller="EncouragementController">
    <g:if test="${notEncouraged}">
                           <button class="btn" ng-click="openEncouragementModal()">Encourage</button>
                           <div modal="encouragementModal" close="closeEncouragementModal()" options="opts">
                            <div class="modal-header">
                                <h3>Encourage!</h3>
                            </div>
                            <div class="modal-body">
                                    You are about to encourage with {{amount}}.
                            </div>
                            <div class="modal-footer">
                               <button class="btn btn-info cancel" ng-click="encourage()">Confirm</button>
                                <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
                            </div>
                        </div>
                    </g:if>
                    <g:else>
                          Thank you for encouraging.
                    </g:else>

EncouragementController.jsは_

function EncouragementController($scope, $http) {
  /**
   * open payment dialog
   */
  $scope.openEncouragementModal = function (amount) {
        $scope.encouragementModal = true;
  };

  $scope.closeEncouragementModal = function () {
        $scope.closeMsg = 'You canceled the encouragement’;
        $scope.encouragementModal = false;
  };


  $scope.opts = {
        backdropFade: true,
        dialogFade:true
  };


}

EncouragementController.$inject = [ '$scope', '$http'];

質問

最初は励ましボタンだけが表示されているはずですが、ボタンとボタンが一緒に表示されencouragementModalます。

それで、どうすればいいですか？

私が従った参考文献

[1]モーダル (ui.bootstrap.modal)

[2]シンプルな Grails + AngularJS の例