$ionicPopup doesn't compile after opening popup, loading new screen, and returning to previous screen

#1

I have an app where a user can trigger an on-boarding popup by clicking on a control button. This all works fine, and the popup is opened in the usual manner using code similar to that shown below.

$ionicPopup
    .show({
        templateUrl: "templates/partials/onboarder.html",
        title: 'Onboarding',
        subTitle: slide.heading,
        cssClass: 'onboarding',
        scope: $popupScope,
        buttons: [
            {
                text: slide.button,
                type: 'button-positive',
                onTap: function () {
					// Does something
                }
            }
        ]
    });

It works beautifully the first time. I can even reload it with no problems. Then, when I open up a new screen and return and try to open it again it doesn’t render anything. The options are all the same and are being populated, but no content is being loaded and the template isn’t being compiled. I even see

{{ slide.content }}

So I know something is not working on the popup code and the angular markup isn’t being compiled.

Has anyone else had similar problems?

#2

It turns out that this was happening because I was creating the scope of the popup twice, like this…

var $popupScope = $scope.new();

I moved this declaration out of the directive link function to the base of the directive and used rootScope to create the new scope, instead. This fixed the issue.

Just in case anyone else has had similar problems.