How can I use ng-switch to toggle displaying a nested table with AngularJS?
<p>I'm trying to use ng-switch in AngularJS to expand a row in a table list to show another table (containing more details about that list item) when it's clicked.</p>

<p>However, I'm having trouble displaying the nested table. I've noticed that the problem only happens with nested tables. If I'm using ng-switch to expand a td instead of a table, it works as expected.</p>

<p>Here's a JSFiddle and my code to illustrate the problem: <a href="https://jsfiddle.net/b5qdah7t/" rel="nofollow" title="fiddle">fiddle</a></p>

<p>The html:</p>

<pre><code>&lt;body ng-app="listAndDetails"&gt;
&lt;div&gt;
    &lt;table class="table table-bordered" ng-controller="ListAndOneDetailCtrl"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;e-mail&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody ng-repeat="user in users" ng-click="toggleSelected()" ng-switch on="isSelected(user)"&gt;
        &lt;tr&gt;
            &lt;td&gt;{{user.name}}&lt;/td&gt;
            &lt;td&gt;{{user.email}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr ng-switch-when="true" class="light-gray"&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;td&gt;Country&lt;/td&gt;
                    &lt;td&gt;Address&lt;/td&gt;
                    &lt;td&gt;Description&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;{{user.country}}&lt;/td&gt;
                    &lt;td&gt;{{user.address}}&lt;/td&gt;
                    &lt;td&gt;{{user.desc}}&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;div ng-controller="ListAndManyDetailsCtrl"&gt;
    &lt;table class="table table-bordered"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;e-mail&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody ng-repeat="user in users" ng-controller="UserCtrl" ng-click="toggleSelected()" ng-switch on="isSelected()"&gt;
        &lt;tr&gt;
            &lt;td&gt;{{user.name}}&lt;/td&gt;
            &lt;td&gt;{{user.email}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr ng-switch-when="true" class="light-gray"&gt;
            &lt;td&gt;{{user.country}}&lt;/td&gt;
            &lt;td&gt;{{user.address}}&lt;/td&gt;
            &lt;td&gt;{{user.desc}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>The javascript:</p>

<pre><code>angular.module('listAndDetails', [])

  .value('users', [
    { name:'Damien', email:'damien@domain.com', desc:'Damien details go here...', country:'US', address:'address1'},
    { name:'Alex', email:'alex@domain.com', desc:'Alex details go here...', country:'UK', address:'address2'}
  ])

  .controller('ListAndOneDetailCtrl', function ($scope, users) {
    $scope.users = users;

    $scope.selectUser = function (user) {
      $scope.selectedUser = user;
    };

    $scope.isSelected = function (user) {
      return $scope.selectedUser === user;
    };
  })

  .controller('ListAndManyDetailsCtrl', function ($scope, users) {
    $scope.users = users;
  })

  .controller('UserCtrl', function ($scope) {

    $scope.toggleSelected = function () {
      $scope.selected = !$scope.selected;
    };

    $scope.isSelected = function (user) {
      return $scope.selected;
    };
  });
</code></pre>

<p>The div on top attempts to show a nested table upon clicking the list item, but nothing happens.</p>

<p>The div at the bottom attempts to show child td items upon clicking the list item and it works exactly as expected.</p>

<p>Does anyone have any idea what the problem is when I'm trying to expand to show a nested table using ng-switch? And how to solve it?</p>