Ionic modal showing fullscreen

ionic-v1
1

I have a mobile app, Where i want to show image preview in modal. I dont know why but when i try to preview thumbnail image in modal. Modal appears full screen. How i want it to be something like http://codepen.io/mhartington/pen/RNgqJo. I copied the FADE-IN/OUT css but that is also not working.

Below is what i have

    $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
            $scope.modal = $ionicModal;
        }, {
            scope: $scope,
            animation: 'slide-in-up'
    });

and template code is

 <script id="modal.html" type="text/ng-template">
     <ion-modal-view class="modal" ng-click="modal.hide()">
      <ion-content>
        <img  src="img/1.jpg"> 
      </ion-content>
    </ion-modal-view>
 </script>
2

OK i got it, Its because ionic by default shows fullscreen modal, if we test the demo on laptop it will be center aligned and on real android devices it will be full screen.