アニメーション化されたdivにui-selectが表示されない

Question

In this punk私はui-selectをdivから上部にスライドして表示します（ui-selectは複数の項目を受け入れます）。問題は表示されないということです。任意のアイデアをどのようにこれを修正するには？

Javascriptを

var app = angular.module("app", ['ngSanitize','ngAnimate']); 

app.controller('ctl', function($scope) { 
    $scope.tags = ['Red','Green','Blue','Maroon','Umbra','Turquoise']; 
    $scope.multiple = {}; 
    $scope.multiple.tags = ['Blue','Red']; 
}); 

HTML

Open <input type="checkbox" ng-click="opened=!opened"> 

<div class="panel" ng-show="opened"> 
    <ui-select multiple ng-model="multiple.tags" style="width:200px;height:30px"> 
     <ui-select-match>{{$item}}</ui-select-match> 
     <ui-select-choices repeat="tag in tags | filter:$select.search"> 
      {{tag}} 
     </ui-select-choices> 
    </ui-select> 
</div> 

CSS

.panel{ 
position: fixed; 
right: 20px; 
top: -2px; 
width:400px; 
height:300px; 
background-color:orange; 
} 
.panel.ng-hide { 
    top: -300px; 
} 
.panel.ng-hide-add, .panel.ng-hide-remove { 
    transition: 0s linear all; 
} 
.panel.ng-hide-add-active, .panel.ng-hide-remove-active { 
transition: all ease-in-out 0.5s; 
} 
.panel.ng-show-add-active { 
    display: block; 
} 

Answer 1

はあなたの選択した文字列のオプションが表示されますあなたのui-select要素、上tagging（ディレクティブ）属性を追加します。

<ui-select multiple ng-model="multiple.tags" tagging style="width:200px;height:30px"> 
    <ui-select-match>{{$item}}</ui-select-match> 
    <ui-select-choices repeat="tag in tags | filter:$select.search"> 
    {{tag}} 
    </ui-select-choices> 
</ui-select> 

Forked Plunkr