UIブートストラップドロップダウントグルを手動で閉じると2回クリックする必要があります

Question

UIブートストラップドロップダウンコンポーネントを使用してクリック時にangular-bootstrap-datetimepickerカレンダーを表示しています。また、日付が選択された後にドロップダウンを閉じるために$watchを追加しました。

Plunker

<div uib-dropdown id="calendar1"> 
    <h4> 
    <a uib-dropdown-toggle id="calendar1-toggle" href="">Select Date <b class="caret"></b> 
    </a> 
    </h4> 
    <ul uib-dropdown-menu> 
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker> 
    </ul> 
</div> 

$scope.$watch('date', function(newValue){      
    angular.element(document.getElementById('calendar1')).removeClass('open'); 
}) 

removeClass('open')は働いていたが、また新たな問題をもたらしました。日付（removeClass('open')が呼び出された）を選択したら、ドロップダウンを2回クリックして開く必要があります。

私は、uibソースコードに見えたいくつかの掘削を行なったし、次のことを試してみました：

window.angular.element(document.getElementById('calendar1')).removeClass('open'); 
window.angular.element(document.getElementById('calendar1-toggle')) 
    .removeClass('collapse') 
    .addClass('collapsing') 
    .attr('aria-expanded', false) 
    .attr('aria-hidden', true); 

しかし、私はまだ二回トグルを押していました。私は間違って何をしていますか？

Answer 1

クラスを手動で変更する方法は、開いている/閉じることではありませんuib-dropdownどうしてそうしていますか？ドキュメントは明らかにドロップダウンを表示/非表示にするis-open属性を示しています。

マークアップ：

スクリプト

<div uib-dropdown id="calendar1" is-open="dropdownOpen"> 
    <h4> 
    <a uib-dropdown-toggle href="">Select Date <b class="caret"></b> 
    </a> 
    </h4> 
    <ul uib-dropdown-menu> 
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"> 

    </datetimepicker> 
    </ul> 
</div> 

：

$scope.$watch('date',function(newValue){ 
    //angular.element(document.getElementById('calendar1')).removeClass('open') 
    $scope.dropdownOpen = false; 
    }); 

Plunker：https://plnkr.co/edit/touxnNRmnsefAMScCprC?p=preview