javascript - Angular JS - Show 1 div and hide all others -

i have requirement of toggling between div show/hide. achieve through following code

 <div class="fav-player" ng-repeat = "selectedplayer in selectedplayers">             <div class="player-head">                 <div class="player-name" ng-click="showdetails = ! showdetails" id="name-{{selectedplayer.id}}">{{selectedplayer.firstname}})</div>              </div>              <div class="fav-player-score-detail" id="fav-{{selectedplayer.id}}" ng-show="showdetails">                 hi, {{selectedplayer.firstname}} - shown             </div>   </div> 

clicking div: player-head shows fav-player-score-detail but, challenge hide other divs except 1 shown. should not see divs expanded @ once. 1 should expanded. pls help!

demo here

thanks in advance!

save selected div on ng-click , update ng-show display if div selected one.

upd: maintain toggle functionality details, i'd use function instead of inline expression.

 $scope.toggledetails = function(name){     if($scope.detailsshown === name){         $scope.detailsshown = null;     } else {         $scope.detailsshown = name;     }  } ... <div class="player-name" ng-click="toggledetails(selectedplayer.firstname)" > ... <div class="fav-player-score-detail"  ng-show="selectedplayer.firstname==detailsshown"> 

updated fiddle