How to bypass popup blocker in browsers when using Angular.js ng-click?

Question

Angular

The task is this: there are authorization buttons through social networks. By clicking on them, a new window (popup) should open and authorization should be performed there.
The project uses TypeScript.
The scheme of actions is as follows:

<div class="social" ng-init="loadAuthProviders()">
            <div class="providers">
                <h3>{{'Login.Social.Title' | t:'Social Login'}}</h3>
                <p class="lead">{{'Login.Social.Description' | t:'Choose your social login'}}</p>
                <loader hide-on="authProviders">{{'Login.Social.Loading' | t:'Loading the social login options'}}</loader>
                <div class="providers-list text-xs-center" ng-show="authProviders">
                    <b><a ng-repeat="provider in authProviders" href="" class="provider" ng-click="login(provider)" onclick=""  ></b>
                        <img img-src="/img/social/{{provider | lowercase}}.png" fallback-src="/img/social/default.png" alt="{{provider}}" title="{{provider}}">
                    </a>
                </div>
            </div>
        </div>

here is the line ng-click="login(provider)" - it calls a function that starts the process of creating a link to the authorization site for the selected provider, for example 'Google' ( this page will be opened in popup ). But browsers block pop-ups (it's clear why). I've read about how to get around this problem, you need to explicitly set the popup's opening (via onclick() for example).
But I need to find a way to do this using ng-click (or something similar)
Below is a function that "does" the popup itself

Popup.PopupCenter = function (url, title, width, height) {
          var left = (screen.width / 2) - (width / 2);
          var top = (screen.height / 2) - (height / 2);
          

          var popup = window.open(url, title,
              'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes,' +
                  ' resizable=yes, copyhistory=no, ' +
                  'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);

          if (!BWL.Services.Popup.IsPopupClosed(popup)) {
              popup.focus();
          }

          return popup;
      };

And here is the popup call itself after the link is formed (profile.AuthURL)

if (isFramed) {
var popup = BWL.Services.Popup.PopupCenter(profile.AuthURL, 'AuthWindow', 500, 500);
} else {
 this.$window.location.href = profile.AuthURL;
}

Thanks in advance!

Answer 1

Looked at the directive code . It doesn't stop anywhere. Most likely, you are interrupting the handler thread.
In order for the browser to accept the popup as legitimate, the execution of the handler must not be interrupted (for example, by a request to the server or by a timeout).
Demo jsbin.com/voxafizu/5