ionic page not draggable and not zoomable

Question

I have an ionic app with a long and wide table. I can scroll the table up and down. However, I cannot move the table left and right. This is a problem as the table has many columns. A nice feature would be that the page can be zoomable by using the 2-finger action.

Here is the relevant html code;

<div ng-controller="TestCtrl" class="container">
  <ion-content class="has-header" overflow-scroll="true">
    <ion-scroll zooming="true" direction="xy">
      <table ng-table="tableParams" class="table table-bordered">
      <!-- table contents -->
      </table>
    </ion-scroll>
  </ion-content>
</div>

How to use the ionic directives correctly to make the page draggable left and right as well as zoomable?

My target platform is Android 5.1

Answer 1

I was able to accomplish what you wanted with the following:

<ion-content>
    <ion-scroll zooming="true" direction="xy" style="height:500px">
      <table ng-table="tableParams" style="width:600px">
        <!-- table contents -->
      </table>
    </ion-scroll>
</ion-content>

To me, the trick seemed to be not specifying the table width in percentage.