Bootstrap responsive table not working with angular js ng-view in partial panel

Question

I have an application in which I load html by routeProvider of angular js. In one of the html's i further include htmls based on a ng-switch. in the child html i have panels with table. I want to make those table to be responsive, but somehow even after embedding the table in a div with class table-responsive I don't see the table to fit into the div.

<script>
 myapp.config(['$routeProvider', function($routeProvider) {
      $routeProvider.
      when('/summary',{
        templateUrl: 'templates/summary.html',
        controller: 'SummaryController'
      }).
      when('/vms', {
        templateUrl: 'templates/widgets.html',
        controller: 'WidgetController'
      }).
      otherwise({
        redirectTo: '/summary'
      });
    }]);
</script>

Further in widgets.html i have the following code.

<div ng-repeat="widgetData in widgets" class="col-lg-4" >
    <div ng-switch on="widgetData.widgetType">
        <div ng-switch-when="chart">
            <div ng-include="'templates/chart.html'"></div>
        </div>
        <div ng-switch-when="number">
            <div ng-include="'templates/number.html'"></div>
        </div>
        <div ng-switch-when="table">
            <div ng-include="'templates/table.html'"></div>
        </div>
    </div>
</div>

In tables.html I have following markup

    <div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        <!--table-->
        <div class="table-responsive">
            <table class="table table-condensed table-hover table-bordered">
                <thead>
                    <tr>
                        <th>Heading 1</th>
                        <th>Heading 2</th>
                        <th>Heading 3</th>
                        <th>Heading 4</th>
                        <th>Heading 5</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                    <tr>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                    <tr class="danger">
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                </tbody>                    
            </table>
        </div>
        <!--end of table-->
    </div>
</div>

Answer 1

The class in question:

• table-responsive

does not do what you expect. It has the following rules:

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }

Which do nothing to shrink the table to fit the container.