ng-click не работает в директиве встроенного всплывающего окна Magnific

Я создал великолепную директиву всплывающих окон в angularjs. Он отлично работает с событием ng-click по ссылке описания при первой загрузке, но после закрытия всплывающего окна и повторного нажатия на ссылку описания оно не работает.

Пожалуйста, обратитесь к коду ниже:

PhotoCtrl.js

(function () {
    'use strict';

    function PhotoCtrl($rootScope, $scope, $state, HzServices, HzPhotoService) {

        $scope.doAlbumList = function () {
            var data = {q: $state.params.pid};
            $scope.albums = {};
            $scope.albumsCount = 0;
            $scope.photos = {};
            $scope.photosCount = 0;
            $rootScope.arrData = [];

            var deferred = HzServices.deferred("/api/album/list", 'GET', data);
            deferred.then(
                    function (res) {
                        /*
                         * success in repsonse
                         * Share common photo & album data across all controllers, directives by services.
                         */
                        var data = {album: {count: res.data.count.album, data: res.data.album}, photo: {count: res.data.count.photo, data: res.data.photo}};
                        /*
                         * Create an array of magnific inline popup content
                         */
                        angular.forEach(data.photo.data, function (value, key) {
                            if (value.data.length > 0) {
                                angular.forEach(value.data, function (value_, key_) {
                                    $rootScope.arrData.push({
                                        imageDescription: value_.photo_description,
                                        imageScale_img: "/resize/" + value_.module + "/" + value_.photo_name,
                                        imageOriginal_href: "/" + value_.module + "/" + value_.photo_name
                                    });
                                });
                            }
                        });

                        HzPhotoService.setSharedData(data);
                        $scope.albums = $rootScope.sharedData.album.data;
                        $scope.albumsCount = $rootScope.sharedData.album.count;
                        $scope.photos = $rootScope.sharedData.photo.data;
                        $scope.photosCount = $rootScope.sharedData.photo.count;
                    },
                    function (res) {
                        /*
                         * Error hading in repsonse
                         */
                        var data = {album: {count: $scope.albumsCount, data: $scope.albums}, photo: {count: $scope.photosCount, data: $scope.photos}};
                        HzPhotoService.setSharedData(data);
                    }
            );
        }

        /**
         * Get Photos data & count
         * @returns {Array}
         */
        $scope.doGetPhoto = function () {
            return [{photos: $scope.photos, photoCount: $scope.photoCount}];
        }

        $scope.doEditDescription = function () {
            console.log("description links from controller called");
        }

    angular
            .module("AppWhizbite")
            .controller('PhotoCtrl', ['$rootScope', '$scope', '$state', 'HzServices', 'HzPhotoService', PhotoCtrl]);
}());

photoList.html

<div>
    <div class="total_album_photo gallery" ng-repeat-start="photo in photos track by $index">
        <div class="no_of_photo imgWrapper">
            <a href="javascript:void(0);" class="popup-link" data-index="{{$index}}">
                <img ng-src="/resize/photo/{{photo.photo_name}}" height="120" width="120"/>
            </a>
        </div>
    </div>
    <div ng-repeat-end=""><hz-photo-popup></hz-photo-popup></div>
</div>

hzPhotoDirective.js

(function () {
    'use strict';
    angular
            .module("AppWhizbite")

            .directive("hzPhotoPopup", ["$rootScope", "$compile", "HzPhotoService", function ($rootScope, $compile, HzPhotoService) {

                    var magnificMarkup = "\n\
<form ng-controller=\"PhotoCtrl as Photo\" class=\"white-popup-block popMarkup ng-pristine ng-valid ng-scope\" id=\"dataPopup\" >\n\
    <div class=\"popup_heading\">Photo</div>\n\
    <div id=\"img_center\">\n\
        <img style=\"width:100%\" src=\"\" id=\"img_center_content\" class=\"mfp-imageScale\">\n\
    </div>\n\
    <div class=\"popup_main\">\n\
        <div class=\"popup_left photo_popup_left\">\n\
             <div class=\"popup_raw1\">\n\
                <a href=\"javascript:void(0);\" ng-click=\"doEditDescription()\">Edit description</a>\n\
                <div class=\"mfp-imageDescription\" style=\"cursor:pointer;\" ng-click=\"doEditDescription()\"></div>\n\
                <textarea class=\"submitByEnter commentarea mfp-imageDescription\" placeholder=\"Edit description\" style=\"height: 76px;display:none;\"></textarea>\n\
            </div>\n\
        </div>\n\
    </div>\n\
    <div class=\"video_main\">\n\
    </div>\n\
    <button class=\"mfp-close\" type=\"button\" title=\"Close (Esc)\">×</button>\n\
</form>";
                    return {
                        restrict: "AE",
                        replace: false,
                        scope: true,
                        compile: function (scope, element) {
                            return{
                                pre: function (scope, element, attrs) {
                                    if (scope.$last) {
                                        // Iterate through all thumbnails class to bind magnific popup plugins 
                                        angular.forEach(angular.element(".gallery > .imgWrapper > a"), function (val, key) {
                                            angular.element(".popup-link").eq(key).magnificPopup({
                                                key: 'my-popup',
                                                //items: arrData, // Array of media details
                                                items: $rootScope.arrData, // Array of media details
                                                index: key, // Index of media ref: data-index
                                                type: 'inline',
                                                verticalFit: true, // Fits image in area vertically
                                                inline: {
                                                    // Magnific popup custom markup to show media (photo) gallery
                                                    markup: $compile(magnificMarkup)(scope)
                                                },
                                                gallery: {
                                                    enabled: true
                                                },
                                                callbacks: {
                                                    open: function () {
                                                        console.log("open called");
                                                    },
                                                    change: function () {
                                                        console.log("cahnge callaed");
                                                    },
                                                    markupParse: function (template, values, item) {
                                                        // optionally apply your own logic - modify "template" element based on data in "values"
                                                        // console.log('Parsing:', template, values, item);
                                                        console.log("markup parse called");                                                        
                                                    },
                                                    elementParse: function (item) {
                                                        console.log("element parse called");
                                                    }
                                                }
                                            });
                                        });
                                    }
                                }
                            }
                        },
                        link: function (scope, element, attrs) {
                            console.log("link method called");
                        }
                    }
                }]);
}());