title: Master / Detail grid in Angular
body: <p>In Angular, I am trying to create a table that has collapsible detail rows.  I had a sample of this working with a stack of row panels for the master details,which contained collapsible tables if are details for the master. I am attempting to modify the code to use tables for the master data, and tables for details data as well.  However, I can't get it to open or collapse properly.  </p>
  
  <p>I have a very simple plunker file to demonstrate what I have:
  <a href="http://plnkr.co/9ma3FnuzCrYJp72dqQXx?p=info" rel="nofollow noreferrer">http://plnkr.co/9ma3FnuzCrYJp72dqQXx?p=info</a></p>
  
  <p>I believe its a problem with the HTML, I am trying to test with ng-repeat in different places, such as at a div or tr, but I am not too familiar with angular.  Could anyone point out what I am doing wrong?   I am trying the following:    </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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"&gt;
  
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="../css/customizedbs.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;div data-ng-controller="homeController"&gt;
      &lt;div class="container"&gt;
        &lt;table class="table table-striped"&gt;
          &lt;tr class="row"&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
  
          &lt;/tr&gt;
          &lt;tbody ng-repeat="product in products"&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;span class="handpointer glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)" data-target="#view_{{product.productid}}" data-toggle="collapse" aria-expanded="false" data-ng-if="product.items!=null"&gt;&lt;/span&gt;
              &lt;/td&gt;
              &lt;td&gt; {{product.productid}}&lt;/td&gt;
              &lt;td&gt; {{product.productname}}&lt;/td&gt;
  
            &lt;/tr&gt;
  
            &lt;div class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null"&gt;
              &lt;div class="col-sm-offset-1"&gt;
                &lt;table class="table-condensed responsive-table"&gt;
                  &lt;tr class="row"&gt;
                    &lt;th&gt;#ID&lt;/th&gt;
                    &lt;th&gt;Item&lt;/th&gt;
                    &lt;th&gt;Amount&lt;/th&gt;
                    &lt;th&gt;Qty&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr class="row" ng-repeat="item in product.items"&gt;
                    &lt;td data-ng-bind="item.prodDetailId"&gt;&lt;/td&gt;
                    &lt;td data-ng-bind="item.prodDetailDesc"&gt;&lt;/td&gt;
                    &lt;td data-ng-bind="item.amount | currency"&gt;&lt;/td&gt;
                    &lt;td data-ng-bind="item.qty"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/1.3.11/angular-route.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      angular.module('app', [])
        .controller('homeController', ['$scope', function($scope) {
  
          $scope.collapse = function(event) {
            $(event.target).toggleClass("glyphicon-chevron-down");
          };
  
          $scope.products = [{
            "productid": 1001456,
            "productname": "Spring Season Gift",
            "amount": 250,
            "orderDate": "2015-02-15T00:00:00Z",
            "availablity": 1,
            "items": [{
              "prodDetailId": 17890,
              "prodDetailDesc": "PS4",
              "amount": "150",
              "qty": 1
            }, {
              "prodDetailId": 17891,
              "prodDetailDesc": "Heart Shaped Ring",
              "amount": "100",
              "qty": 1
            }, ]
          }, {
            "productid": 1001457,
            "productname": "Christmas Season Gift",
            "amount": 349,
            "orderDate": "2015-04-15T00:00:00Z",
            "availablity": 1,
            "items": [{
              "prodDetailId": 17900,
              "prodDetailDesc": "Chocolate Giftbox",
              "amount": "150",
              "qty": 1
            }, {
              "prodDetailId": 17901,
              "prodDetailDesc": "Xbox 360",
              "amount": "199",
              "qty": 1
  
            }, ]
          }, {
            "productid": 1001458,
            "productname": "Birthday Gift",
            "availablity": "N/A",
            "amount": 200
          }];
        }]);
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>