expanding and collapsing table rows using angularjs ng-repeat -start and ng-repeat-end

Question

i have one issue can anyone help me please... i have a table in that table i have four users. and i have two icons(one is for expanding and another is for collapsing table rows data at time(all)) above table when i clicked on expand icon the data in table expanded and collapsed. so until this fine to me . now am going to expand particular row of table by clicking arrow(actually present in tr) it expanded particular row and collapsed that particular row. then this time if a clicked expand and collapse icons(expand all and collapse all). then expanding and collapsing are not working. Here am using ng-repeat-start and ng-repeat-end.

<div class="comprehensiveINDiv" ng-show="visibleCarConferenceList">
  <div class="top-bg-expand" >
    <div class="col-md-5 color-blue">
      <h1 class="main-heading1 ">Care Conference
        <span class="expand-btns">
          <a><i class="fa fa-compress color-blue" aria-hidden="true" ng-click="expanded = true"></i></a>
          &nbsp; | &nbsp;
          <a><i class="fa fa-expand" aria-hidden="true" ng-click="loadAllcareplans(); expanded = !expanded"></i></a>
        </span>
      </h1>
    </div>
    <div class="col-md-3 select-pan1 select-inner-pan1 careconfhed">
      <label>Status: </label>
      <select ng-model="filterOpt.opt"
        ng-options="item.name for item in filterOpts.options"
        ng-change="getCareConferenceList();resetPage();"> 
      </select>
    </div>

    <div class="col-md-4 ">
      <sm-range-picker-input class="margn0" fname="Range" label="Range" 
        form="test" ng-model="vm.rangeSelected" flex="100"
        format="DD-MMM-YYYY" divider="To" week-start-day="Monday"
        on-range-select="rangeSelected(range)"
        ng-change="getCareConferenceList();">
      </sm-range-picker-input>
        </div>
      </div>
      <div ng-show="noConfData" class="margnL15">NO RECORDS FOUND</div>
      <div>
        <button type="button" class="btn btn-info btn-sm margnL15" 
          id="addnew_btn" ng-click="addNewconference();">ADD NEW</button>
      </div>
      <div ng-show="confGrid">
        <div class="col-md-12">
          <div class="table-responsive">
            <table class="table table-data3 tablestyle" id="tbl1">
              <thead>
                <tr>
                  <th></th>
                  <th> Date / Time </th>
                  <th>Reason</th>
                  <th>Status </th>
                  <th>Action</th>
                  <!--<th>time</th>-->
                </tr>
              </thead>
              <tbody>
                <tr ng-show="noConfData"><td colspan="4" >NO RECORDS FOUND</td></tr>
                <tr ng-repeat-start="careconf in residentCareConferenceList" class="md-table-content-row class_{{careconf.CareConferenceID}}">
                  <td><a  ng-click="expanded = !expanded"><i class="fa fa-angle-right" aria-hidden="true"></i></a></td>
                  <td ng-class="customClass[h.field]" class="md-table-content">{{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</td>
                  <td ng-class="customClass[h.field]" class="md-table-content">{{careconf.ReasonDescription}}</td>
                  <td ng-class="customClass[h.field]" class="md-table-content">{{careconf.careconferencestatus.CareConferenceStatusDescription}}</td>
                  <td><span class="fa fa-pencil" ng-click="EditCareConference(careconf.CareConferenceID);$event.stopPropagation();"></span></td>
                  <!--<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.TotalTime}}</td>-->
                </tr>

                <tr ng-repeat-end ng-class="{'hide' : expanded}">
                  <td colspan="5" style="width: 100%; border:none !important; padding-left:20px;">
                    <div class="col-md-12  scrolldata">
                      <div class="col-md-12 ">
                        <div class="col-md-12 residance-data-text">
                          <p>Facility :{{careconf.facilitybase.FacilityName }}</p>
                          <p> Resident : {{currentResident.personbase.FullName}}</p>
                          <p> Admitted :{{currentResidentDetails.AdmitReAdmiDischDate | date:'dd/MM/yyyy hh:mm a'}}</p>
                          <p> Physician : {{residentprovider}}</p>
                        </div>
                      </div>
                      <div class="col-md-12" id="table">
                        <div class="col-md-12">
                          <!-- Table one -->
                          <p> Interdisciplinary team members involved in this Resident's Care Planning since last Care Conference ({{careconf.LastCareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}) :</p>
                          <div class="tablestyledit">
                            <table class="table">
                              <tr>
                                <th width="50%" class="bdr-table">Name </th>
                                <th width="50%" class="bdr-table">Credentials </th>
                              </tr>
                              <tr ng-repeat="teamMember in careconf.teamMembers">
                                <td class="bdr-table">{{teamMember.ParticipantName}}</td>
                                <td class="bdr-table">{{teamMember.ParticipantRole}}</td>
                              </tr>
                            </table>
                          </div>

                          <div class="col-md-12" style="padding-top:0px;">
                            <div class="row">
                              <div class="md-form">
                                <p style="margin:0px;">Care Conference Summary</p>
                                <div class="empty-text">{{careconf.CareConferenceSummary}}</div>
                              </div>
                            </div>
                          </div>
                          <!--- /Table one -->

                          <!-- Table two -->
                          <div class="col-md-12" style="padding:0px;">
                            <p style="margin:0px; padding-top:10px;">Care Conference Participants :</p>
                            <div class="tablestyledit">
                              <table class="table ">
                                <tr>
                                  <th width="50%" class="bdr-table">IDT Participant Name</th>
                                  <th width="25%" class="bdr-table">Credentials</th>
                                  <th width="25%" class="bdr-table">In Person</th>
                                </tr>
                                <tr ng-repeat="participant in careconf.participants">
                                  <td class="bdr-table">{{participant.ParticipantName}}</td>
                                  <td class="bdr-table">{{participant.ParticipantRole}}</td>
                                  <td class="bdr-table">
                                    <fieldset class="form-group">
                                      <input type="checkbox" data-ng-model="participant.IsInPerson" disabled>
                                    </fieldset>
                                  </td>
                                </tr>
                              </table>
                            </div>
                          </div>
                          <!--/ Table two -->

                          <!-- Table three -->
                          <div class="col-md-12" style="padding:0px;">
                            <p style="margin:0px; padding-top:10px;">Family/Resident Attendance : </p>
                            <div class="tablestyledit">
                              <table class="table table-data-sub ">
                                <tr>
                                  <th class="bdr-table">Name of person Invited</th>
                                  <th class="bdr-table">Relationship</th>
                                  <th class="bdr-table">Attended</th>
                                  <th class="bdr-table">In Person</th>
                                </tr>
                                <tr ng-repeat="familyMember in careconf.familyMembers">
                                  <td class="bdr-table">{{familyMember.ParticipantName}}</td>
                                  <td class="bdr-table">{{familyMember.Relationship}}</td>
                                  <td class="bdr-table">
                                    <fieldset class="form-group">
                                      <input type="checkbox" data-ng-model="familyMember.HasAttended" disabled>
                                    </fieldset>
                                  </td>
                                  <td class="bdr-table">
                                    <fieldset class="form-group">
                                      <input type="checkbox" data-ng-model="familyMember.IsInPerson" disabled>
                                    </fieldset>
                                  </td>
                                </tr>
                              </table>
                            </div>
                          </div>
                          <div class="col-md-12" style="margin-left:-15px;margin-bottom:8px;">
                            <p> Care Conference Date : {{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</p>
                            <p>Signed by:</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div>
            <div flex layout="column" class="pagi-nation">
              <div ng-show="confTotal > 1" flex layout="column">
                <section layout="row" layout-padding="">
                  <div class="col-md-5 col-xs-12">Showing Page <strong>{{confPage}}</strong></div>
                  <div class="col-md-7 col-xs-12">
                    <cl-paging id="confPage" flex cl-pages="confTotal" , cl-steps="3" , cl-page-changed="loadConfPages.onPageChanged()" , cl-align="center center"
                    , cl-current-page="Paging.currentPage"></cl-paging>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ng-show="visibleCarConferenceAdd">
      <div ng-include="'views/doctor/addCareConference.html'"></div>
    </div>
  </div>

and my controller code

  $scope.loadAllcareplans = function () {
    $scope.expanded = true;
  }

and finally am so sorry for my stupid english. and check my functinality (expanded, $scope.loadAllcareplans() and icons at careconference foe expanding and collapsing all table data )

Answer 1

Check this fiddle

The content is not what you provided.

But the logic will be this

https://jsfiddle.net/athulnair/wkz5oq9z/

$scope.collapseAll = function() {
    $scope.data.forEach(function(item) {
                item.isCollapsed = false;
    })
}

Answer 2

Rather than using the above ng-click function in the tag you could go with javascript and adding/removing classes dynamically.I have used ui-bootstrap and glyphicon. Follow the below code.

HTML:

<a data-toggle="collapse" data-target="#test"><i class="test_icon glyphicon  glyphicon-collapse-down"></i><h4 class="header"> Test Class </h4></a>

JavaScript

 $('#test').on('hidden.bs.collapse', function () {

           $(".test_icon").removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");
        });
         $('#test').on('shown.bs.collapse', function () {

           $(".test_icon").removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");
        });