title: I am making accordion on bootstrap tables with data coming from ng-repeat loop with no ui.bootstrap and no jquery
body: <p>I tried making a table in which each row is filled with ng-repeat and along with that i want on click of each row a collapsible panel should appear (accordion).But with my code only single row is rendering
  here is link of my code- </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('ngapp', []);
  app.controller('mainctrl', function($scope) {
    $scope.awesomeThings = [{
      item: 'heoj'
    }, {
      item: 'nniothing'
    }, {
      item: 'skgjs'
    }, {
      item: 'nothing is valued here'
    }];
    $scope.show = [];
    $scope.print = function($event, ind) {
      var el = angular.element('.panel-collapse');
      el.collapse('hide');
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;body ng-app="ngapp" ng-controller="mainctrl"&gt;
    &lt;table class="table table-responsive table-hover table-striped"&gt;
      &lt;thead&gt;
        &lt;tr style="background-color: lavender;"&gt;
          &lt;td&gt;Name&lt;/td&gt;
          &lt;td&gt;Product&lt;/td&gt;
          &lt;td&gt;Age&lt;/td&gt;
          &lt;td&gt;Condition&lt;/td&gt;
          &lt;td&gt;234&lt;/td&gt;
          &lt;td&gt;23&lt;/td&gt;
          &lt;td&gt;34&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="accordion" class="panel-group"&gt;
        &lt;tr ng-repeat="product in awesomeThings" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index+1}}" ng-click="print($event)"&gt;
          &lt;td&gt;{{$index+1}}&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;{{product.item}}&lt;/td&gt;
          &lt;td&gt;{{product.item}}&lt;/td&gt;
          &lt;td&gt;
            23
          &lt;/td&gt;
          &lt;td&gt;few&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>