How to customize the $ionicPopup to show the details?

In my ionic project (ionic + angularjs), I need to use the $ionicPopup kind of box to show the full details of the particular product when user clicks on that product name. But, I was trying to custmozing the popup, I couldn't. Even, I tried with 'templateUrl : templates/example.html'. But, I didn't get the expected results.

I need to show the product's details with a width of 75% and a height of 75%. Or is there any other way to display the details with the same kind of effect $ionicPopup do. Please, help me out.

Maybe you shouldn't use $ionicPopup but $ionicModal.

I made a tutorial on How to Display Images in a Popover, where I used templates and custom CSS. This could work for you as well!

In your case you might want to call

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

Additional you should wrap your template HTML in

<div class="modal" ng-click="closeModal()">
...
</div>

where closeModal() closes the modal view.

Finally, add some CSS styling for your 75% height and width.