Q: how to have a popup child tr for every tr element on ng-click I have a table which using ng-repeat
          <table>
                <thead>
                    <tr>
                        <th>Assets</th>
                        <th>Location</th>
                        <th>Size</th>
                        <th>Price</th>
                        <th>Actions</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr  id="parent" data-ng-repeat="assets in vm.employees"
                         data-toggle="collapse" id="row{{$index}}" data-target=".row{{$index}}">

                        <td class="name">
                            <i class="mdi mdi-plus s16" ng-click="childRowToggle($event)"></i>
                            {{assets.name}}
                            <span class="secondary-text">{{assets.code}}</span>
                        </td>
                        <td>{{assets.location}}</td>
                        <td>{{assets.size}}</td>
                        <td>{{assets.price}}</td>

                    </tr>
                    <tr id="child" data-ng-repeat="assets in vm.employees" class="collapse row{{$index}}">
                        <div>i' have to be shown under every tr element when clicks
                    </tr>
                </tbody> 
           </table>

If i click on the i element which is in parent tr, i want the child tr popup under that tr element. i already tried something like this 
 $scope.childRowToggle =  function($event){
     $('#childrow').remove();
           var $this  = $($event.target);
           var $obj =$this.parent().parent();
           console.log($obj.attr('class'));
           $("<tr id='childrow'><td colspan='5'>Dummy Data</td></tr>").insertAfter($obj);

     }


A: Here is a working version: https://jsfiddle.net/Shitsu/c6bj75mp/.


angular.module('myApp', []).controller('Ctrl',

  function($scope) {
    $scope.employees = [{
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }, {
      name: "lala",
      location: "loc",
      size: 10,
      price: 44
    }];


  });
.noPadding {
  padding: 0 !important;
}

td p {
  padding: 10px;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" ng-controller="Ctrl">
  <table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
      <tr>
        <th>Assets</th>
        <th>Location</th>
        <th>Size</th>
        <th>Price</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="assets in employees track by $index" data-toggle="collapse" data-target="#row-{{$index}}" class="accordion-toggle">
        <td class="name">
          <i class="mdi mdi-plus s16">{{assets.name}}</i>
          <span class="secondary-text">{{assets.code}}</span>
        </td>
        <td>{{assets.location}}</td>
        <td>{{assets.size}}</td>
        <td>{{assets.price}}</td>

      </tr>
      <tr ng-repeat-end>
        <td colspan="5" class="noPadding">
          <div class="accordian-body collapse collapsible" id="row-{{$index}}">
            <p>
              Collapsed datas
            </p>
          </div>
        </td>
      </tr>

    </tbody>
  </table>
</div>



A: Have you thought of using tooltips ? UI-Bootstrap has really nice tooltips which would do exactly what you want. You can choose if you trigger the tooltip on hover or on click. Have a look at this fiddle.
HTML:
<!doctype html>
<html ng-app="App">

  <body ng-controller="Ctrl">
    <table>
      <tr ng-repeat="a in assets">
        <td tooltip-html-unsafe="{{a}}<br />blabla" tooltip-placement="bottom">{{a}}</td>
      </tr>
    </table>
  </body>

</html>

JS:
angular.module('App', ['ui.bootstrap'])
  .controller('Ctrl', function($scope) {

   $scope.assets = ['a', 'b', 'c'];

});

