I am new to angularjs and I am creating an table rows using ng-repeat.
Below is the code snippet
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
<th>heading3</th>
<th>heading4</th>
<th>heading5</th>
<th>heading6</th>
<th>heading7</th>
<th>heading8</th>
<th>heading9</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in taskList">
<td>{{task.item1}}</td>
<td>{{task.item2}}</td>
<td>{{task.item3}}</td>
<td>{{task.item4}}</td>
<td>{{task.item5}}</td>
<td>{{task.item6}}</td>
<td>{{task.item7}}</td>
<td>{{task.item8}}</td>
<td>{{task.item9}}</td>
</tr>
</tbody>
</table>
</div>
and i am loading same in ng-view div
<div ng-view class="container-fluid"></div>
But when I see the above table in mobile mode of chrome browser, table is growing horizontally(out of device width). Same code works fine if I create a test page with same classes. Let me know if anything I need to change to use in angular?
