I am using dynamic panels. I have used "collapse" buttons. The problem is, the collapse button is working only for the first panel

I am using dynamic panels. For now, I have hard coded the data in my JS file. I have used a collapse button. The issue is, the collapse button works fine only for the first panel. Though the collapse button appears on the other panels, it is not working.

Can someone please help me?

Also, i have used a custom directive for using dynamic panels.

Custom Directive’s HTML File:

<div class="panel success panel-heading panel-height" ng-repeat="item in items ">
    <h3 class="panel-title">
        <p class="fontID">
            <span class="pull-left"><i class="fa fa-check-circle"></i></span>
            <span class="pull-right">ID: {{item.Id}}</span>
        </p>
    </h3>
    <hr color="#ff0000" WIDTH="100%" display="block">
    <div ng-hide="hidevar">
        <p class="font">DESCRIPTION: {{item.Desc}}</p>
        <p class="font">STATUS: {{item.Status}}</p>
    </div>
    <div class="text-center">
        <button type="button" class="btn btn-default collapsed" data-toggle="collapse" data-target="#demo">
            VIEW DETAILS
        </button>
    </div>
    <div id="demo" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>
</div>

JS file:

$scope.itemsList = [[
            {
              Id: '2343',
              Desc: 'Not Found',
              Status:'Negative'

            },
            {
              Id: '124213',
              Desc: 'Found',
              Status:'Positive'

            },
            {
               Id: '3',
               Desc: 'Found',
               Status:'Positive',
               Scenario_sub: {
                  sub_id:'234235',
                  sub_msg: 'Not available currently',
                  sub_status: '20A',
               },                         
               Scenario_sub: {
                  sub_id:'12334',
                  sub_msg: 'available currently',
                  sub_status: '10A',
               } 
             }
          ]] 

Custom Directive:

app.directive('showHide', function() {
  return {
    restrict: 'E',
    scope: {
      items : '=',
      scenario_sub: '=',

    },
    templateUrl: 'invoice-val-directive.html',
         link: function(scope, elm, attr) {
            scope.showdes = function(item){
            scope.itemdesc=item;
            scope.hidevar=true;
          }
         }
   };
});

HTML

<div class="row" ng-if="showresult" >
<br>
<br>
 <!-- <div class="row"> 
         <div class="col-lg-3 col-md-6">  -->

            <div ng-repeat="list in itemsList">
                <show-hide items="list"></show-hide>
            </div>

        </div>
    </div>

Source: AngularJS