Custom close button in Ionic popup

ionic-v1
1

I create a custom ionic popup for photo upload. My problem that I am not able to close that popup by using a corner close button. Please help me.
Which look like

image

Here’s my code

             $scope.uploadPhoto = function () {
                var confirmPopup = $ionicPopup.show({

                    title: 'Upload Photo' + '<i class="ion-ios-close-outline popuoclose " ng-click="closePopup()"></i>',

                    scope: $scope,
                    buttons: [
                        {
                            text: '<i class="ion-ios-camera-outline thirty-text" ></i>',
                            type: 'button-positive',
                            onTap: function () {
                                $scope.takePicture();
                            }
               },
                        {
                            text: 'Gallery',
                            type: 'button-positive',
                            onTap: function () {
                                $scope.galleryPicture();
                            }
               },
             ]
            });
              $scope.closePopup = function () {
                  confirmPopup.close();
              };
            };
2

Hey!
Please post your HTML-Markup, because the Javascript looks fine.

3 
       <div class="item item-body text-center" ng-controller="CameraCtrl">
            <h1 class="textColor twentytwo-text">MY PROFILE</h1>
            <img class=" img-circle"  ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
            <img class=" img-circle"  ng-show="imgURI === undefined" ng-src="img/no-profile-photo.jpg">
            <p style="text-align:center; margin:0 auto;">
            <a href="javascript:void(0);" ng-click="uploadPhoto()" class="mt-ten prpl-btn-link text-center ">Upload Photo</a>
            </p>
        </div>

Thanks for reply. when i inspect code i found that it remove ng-click="closePopup() from code. i am bit of confuse why it happen.

4

Remove the href from the link tag.
On click the href has priority and so javascript:void(0) is triggered and not your function.

<div class="item item-body text-center" ng-controller="CameraCtrl">
            <h1 class="textColor twentytwo-text">MY PROFILE</h1>
            <img class=" img-circle"  ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
            <img class=" img-circle"  ng-show="imgURI === undefined" ng-src="img/no-profile-photo.jpg">
            <p style="text-align:center; margin:0 auto;">
            <a  ng-click="uploadPhoto()" class="mt-ten prpl-btn-link text-center ">Upload Photo</a>
            </p>
        </div>

I think it should work then.