Enable zooming and panning in an Ionic app modal.

ionic-zoom-pan-fullscreen-modal.html

<ion-modal-view class="modal-fullscreen">
  <ion-header-bar>
    <h1 class="title">My Title</h1>
    <button class="button" ng-click="close()"><i class="icon close"></i></button>
  </ion-header-bar>
  <ion-content overflow-scroll="true">
    <ion-scroll zooming="true" direction="xy" scrollbar-x="false" scrollbar-y="false" min-zoom="1" class="helper-zoom-container">
        <div class="row">
          <div class="col col-center">
            <img src="https://placeholdit.imgix.net/~text?txtsize=1024&txt=1024%C3%97176&w=1024&h=1024" alt="" class="img-center img-fullscreen" />
          </div>
        </div>
    </ion-scroll>
  </ion-content>
</ion-modal-view>

styling.scss

//Helper
.helper-zoom-container {
  width: 100%;
  height: 100%;
}
//Fullscreen modal
.modal-fullscreen {
  width: 100%;
  height: 100%;
  min-height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  .row {
    height: 100%;
    padding: 20px;
  }
  @media screen and (orientation: landscape) {
    .col {
      height: 100%;
    }
  }
}
//Fullscreen image
.img-fullscreen {
  border:solid 1px red;
  display: block;
  @media only screen and (orientation: landscape) {
    width: auto;
    max-height: 100%;
    border-color:blue;
  }
  @media only screen and (orientation: portrait) {
    max-width: 100%;
    height: auto;
    border-color:green;
  }
}
//Center image
.img-center {
  margin: 0 auto;
  display: block;
}