Ionic Pinch To Zoom

This is what I have for my image modal with no header and pinch to zoom.

<ion-modal-view  class="image-modal" ng-click="closeImgModal()">
	<ion-scroll zooming="true"
		    direction="xy"
		    delegate-handle="zoom-pane"
		    class="zoom-pane"
		    min-zoom="1"
                    scrollbar-x="false"
	            scrollbar-y="false"
		    overflow-scroll="false">
		<img ng-src="{{imageSrc}}" >
	</ion-scroll>
</ion-modal-view>

and here is my css:

/* full screen image zoom pane */

.zoom-pane {
	width: 100% !important;
	height: 100% !important;
}

.zoom-pane .scroll {
	min-height: 100% !important;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.zoom-pane img {
	width: 100% !important;
	vertical-align: middle !important;
}

.image-modal {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
background: black !important;
}