How to trigger ng-hide on all elements

Question

I have a list that when you click on an li, it reveals a hidden list of information about that person.

In the footer, theres simple navigation showing the different views and when you click, angular filters through the original list for the matched elements.

All I am stuck on is this; if you click an li element and reveal the info for that person, then click one of the navigation buttons, it will still show that person but with the hidden element revealed...not closed.

Ideally, id prefer that when the user clicks any of the footer navigation buttons, the list reveals just the names, not the hidden info..regardless of whether it was clicked or not.

If this was just in Jquery or javascript, i would know how to approach this but, Im sure theres an 'angular specific' approach I just don't know about.

Heres the HTML:

<div ng-controller="MyCtrl">
<ul id="housewrapper" ng-cloak>
<li ng-repeat="item in house track by item.member" class="listings" ng-click="showComments = !showComments;"  ng-show="([item] | filter:filters).length > 0" >

    <span ng-if="item.whereHesheStands == 'oppose'"><img class="dot againstdot" src="img/against.png">{{item.member}}
    </span>

     <span ng-if="item.whereHesheStands == 'leanoppose'">
         <img class="dot againstdot" src="img/against.png">{{item.member}}
    </span> 

     <span ng-if="item.whereHesheStands == 'support'" ng-click="clickMeImg($event);">
    <img class="dot supportdot" src="img/support.png">{{item.member}}
    </span>  

     <span ng-if="item.whereHesheStands == 'leansupport' ">
    <img class="dot supportdot" src="img/support.png">{{item.member}}
    </span> 
     <span ng-if="item.whereHesheStands == 'unknown' ">
    <img class="dot undecideddot" src="img/undecided.png">{{item.member}}
    </span>     

     <span ng-if="item.whereHesheStands == 'undecided' ">
    <img class="dot undecideddot" src="img/undecided.png">{{item.member}}
    </span>         

    <div class="memberdetail"  ng-show="showComments"  ng-click="$event.stopPropagation();" >
        <ul class="memberbreakdown">
            <li class="partyline" >
            {{item.party}} - {{item.state}}</li>
            <li class="comments">
            <span style="color:#a4a4a4;" ng-if="!(item.comments)">Comment not available</span>

            <span>{{item.comments}}</span>
            </li>                                       
        </ul>

    </div>



 </li>

</ul>


<div id="appfooterWrapper">
    <ul id="appfooter">

     <li ng-click="myFunctionRepublican();" ng-class="class">R</li>
     <li ng-click="myFunctionDemocrat();" ng-class="class2">D</li>
     <li ng-click="myFunctionSupport();" ng-class="class3">S</li>
     <li ng-click="myFunctionOppose();" ng-class="class4">A</li>
     <li ng-click="myFunctionUnknown();" ng-class="class5">U</li>
    </ul>
</div>             

and the javascript of the "R" navigation button

$scope.myFunctionRepublican = function() {

  $('.memberdetail').removeClass('ng-show');
  $('.memberdetail').bind('click');

   $scope.filters = function(house) {
     return house.party == 'R'  ;
 };
    if ($scope.class === ""){
        $scope.class = "rep";
        $scope.class2 = "";
        $scope.class3 = "";
        $scope.class4 = "";
        $scope.class5 = "";
        }
     else{
        $scope.class = "";
        }
$('html, body').animate({scrollTop:0}, 'fast');

 var loading;

 loading = true;
 if (loading == true) {
    setTimeout(function() {
         spinner.stop();
          $('.listings').not('.ng-hide').addClass('republican');
          console.log($('.republican').length);
         $('#housewrapper').stop().fadeIn(350).addClass(
             'marginAdd');
         $('#subhead').removeClass('slidedown');

         $('#subhead').html('Republicans').css('color', '#d41600');

         setTimeout(function() {
             $('#subhead').addClass('slidedown');
         }, 300);
     }, 500);
    }
} 

Here's the Fiddle

Answer 1

A couple changes, attach a property onto each member.

View changes:

ng-click="item.showComments = !item.showComments;"

<div class="memberdetail"  ng-show="item.showComments"  ng-click="$event.stopPropagation();" >

Controller changes:

function resetShow() {
  for(var i = 0, l = $scope.house.length; i < l; i++) {
    $scope.house[i].showComments = false;   
  }
}

Then just call it when you navigate:

$scope.myFunctionUnknown = function() {
  resetShow();
  ....

Forked Fiddle