twitter bootstrap - expand and open collapse depend on the value angular -

i wonder how can achieve conditional situation able open 1 of collapse. say, got value, if country cz, want open collapse 1, else if country usa, should open collapse 2.

   <div ng-controller="collapsedemoctrl"> <button class="btn" id="btn" ng-click="iscollapsed = !iscollapsed">cz</button> <hr> <div collapse="iscollapsed">     <div>cz</div>  </div>   </div>     <div ng-controller="collapsedemoctrl"> <button class="btn" id="btn" ng-click="iscollapsed = !iscollapsed">usa</button> <hr> <div collapse="iscollapsed">     <div> usa</div>  </div>   </div> 

here controller

  var app = angular.module('app', ['ui.bootstrap']);    app.controller('collapsedemoctrl', function($scope) {   $scope.iscollapsed = true;    //not working code here   $scope.values = $document.getelementbyid('btn').innerhtml;   if($scope.values==1)   $scope.iscollaspe=false;   }); 

i curious of correct way it. because code not perform correct thing. suggestions?

plunker: http://plnkr.co/edit/5l0lec8oetly0zl8xko4?p=preview

you can use ng-switch. please take @ demo.

<div ng-controller="collapsedemoctrl">     <button class="btn" id="btn" ng-click="clicked ='cz'">cz</button>     <button class="btn" id="btn" ng-click="clicked ='usa'">usa</button>     <hr>     <div ng-switch="clicked">         <div ng-switch-when="cz">             <div class="well well-large">some content cz</div>         </div>         <hr>         <div ng-switch-when="usa">             <div class="well well-large">some content usa</div>         </div>     </div> </div> 

demo