angular js: accessing $scope from jQuery

Question

There are several questions like this in stackoverflow. I know. Tried all the answers, but still no luck. My html :

Answer 1

The issue is caused by the order in which the plugins are initialized.

1. jQuery
2. AngularJS

So accessing scope() in a jQuery script on document load will result in undefined, since jQuery is run before Angular.

The solution to this is to let AngularJS execute jQuery once it is ready, using directives.

Example :

Controller

app.directive("myDirective", function() {
        return {
            restrict: "A",
            scope: {
                customheadline: "@"
            },
            link: function(scope, elem, attrs) {
                var country = scope.customheadline;
                alert(country);
            }
        }
    });

HTML

    {{gameContent.headline}}