javascript - set all ng-if to false on click except clicked item -

i have ng-repeat has button has function toggles ng-show element inside ng-repeat.

the inside class movie_option span has ng-click=toggleinfo($index):

and div additional_info has ng-show shows or hides element.

    <ul ng-cloak="showresult">         <li class="search_results" ng-repeat="movie in movies | orderby: '-release_date'  track $index">             <div class="movie_info">                 <div class="movie_options">                     <div class="slide">                         <span class="movie_option">                             <span><i class="fa fa-question-circle" aria-hidden="true" ng-click="toggleinfo($index)"></i></span>                         </span>                     </div>                 </div>             </div>             <div class="additional_info" ng-show="hiddendiv[$index]">                 {{movie.overview}}             </div>         </li>     </ul> 

when user clicks on icon calls function:

    $scope.toggleinfo = function (index) {          $scope.hiddendiv[index] = !$scope.hiddendiv[index];     } 

this toggles ng-show state hiddendiv ng-show. works fine.

what wanted put hiddendiv states on false except 1 clicked 1 ng-show true.

that's pure algorithm problem, not related angular.

instead of having boolean per item, simpler remember element (index) should displayed:

<ul ng-cloak="showresult">     <li class="search_results" ng-repeat="movie in movies | orderby: '-release_date'  track $index">         <div class="movie_info">             <div class="movie_options">                 <div class="slide">                     <span class="movie_option">                         <span><i class="fa fa-question-circle" aria-hidden="true" ng-click="model.displayedindex = $index"></i></span>                     </span>                 </div>             </div>         </div>         <div class="additional_info" ng-show="$index === model.displayedindex">             {{movie.overview}}         </div>     </li> </ul> 

and in controller $scope.model = {}

fiddle: http://jsfiddle.net/6dklqgfl/