InAppBrowser passing a callback function

Question

I have a InAppBrowser working fine in my app

$scope.openInAppBrowser = function (url) {
        var ref = window.open(encodeURI(url), '_blank', 'location=yes');
        ref.addEventListener('loadstop', function (event) {
            if (event.url.match("close")) {
                $scope.refreshGamePage = 1; // this variable is under watch in a directive
                ref.close();
            }           
        });
    }

here is the directive written to refresh the page

module.directive('reloadPage', ['$http', function ($http) {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
             $scope.refreshPage = function () {
                if($scope.refreshGamePage ==1)
                    return true;
                else
                    return  false;
            };

            $scope.$watch($scope.refreshPage, function (v) {
                if (v) {
                    $scope.setGamePage(); // this function will contains code to refresh game page
                }
                });
            }       
        };
    }]);

but it seems like loadstop event listener is unable to update scope variable. Can anyone help me with this?

Basically idea is I want to refresh current page (one from which InAppBrowser opened) in my app as soon as InAppBrowser closes itself.

Any better way to achieve this will be appreciated.

Answer 1

Just use angular $apply() method to change the value of angular variables because it is changed out of angularjs turn.

$scope.openInAppBrowser = function (url) {
        var ref = window.open(encodeURI(url), '_blank', 'location=yes');
        ref.addEventListener('loadstop', function (event) {
            if (event.url.match("close")) {
                $scope.$apply(function () {
                $scope.refreshGamePage = 1;
              });
                ref.close();
            }           
        });
    }