Calling AngularJS inside <script> tag

Question

I have this directive:

function Recaptcha(RecaptchaService) {
    return {
        restrict: 'E',
        templateUrl: 'app/components/login/recaptcha.html',
        controller: function($scope) {
            $scope.sendResp = function(response) {
                RecaptchaService.sendResponse(response);
            };
        }
    }
}

With the template login/recaptcha :

<script src='https://www.google.com/recaptcha/api.js'></script>

<script type="text/javascript">
    var verifyCallback = function(response) {
        $scope.sendResp(response);
    };
</script>

<div class="g-recaptcha" data-sitekey="MY-KEY" data-callback="verifyCallback"></div>

So, I want to call $scope.sendResp inside my <script> . But I'm getting $scope is not defined . Is there a way to do that?

Answer 1

Try this..
(This works only when the captcha div is inside ng-app)

<script type="text/javascript">
    var verifyCallback = function(response) {
        var el = document.querySelector('.g-recaptcha'),
            $el = angular.element(el),
            $scope = $el.scope();

            $scope && $scope.sendResp(response);
    };
</script>