How to access global js variable in AngularJS directive

I created a working CodePen example demonstrating how to do this the correct way in AngularJS. The Angular $window service should be used to access any global objects since directly accessing window makes testing more difficult.

HTML:

<section ng-app="myapp" ng-controller="MainCtrl">  Value of global variable read by AngularJS: {{variable1}}</section>

JavaScript:

// global variable outside angularvar variable1 = true;var app = angular.module('myapp', []);app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {  $scope.variable1 = $window.variable1;}]);

Copy the global variable to a variable in the scope in your controller.

function MyCtrl($scope) {   $scope.variable1 = variable1;}

Then you can just access it like you tried. But note that this variable will not change when you change the global variable. If you need that, you could instead use a global object and "copy" that. As it will be "copied" by reference, it will be the same object and thus changes will be applied (but remember that doing stuff outside of AngularJS will require you to do $scope.$apply anway).

But maybe it would be worthwhile if you would describe what you actually try to achieve. Because using a global variable like this is almost never a good idea and there is probably a better way to get to your intended result.

I have tried these methods and find that they dont work for my needs. In my case, I needed to inject json rendered server side into the main template of the page, so when it loads and angular inits, the data is already there and doesnt have to be retrieved (large dataset).

The easiest solution that I have found is to do the following:

In your angular code outside of the app, module and controller definitions add in a global javascript value - this definition MUST come before the angular stuff is defined.

Example:

'use strict';//my data variable that I need access to.var data = null;angular.module('sample', [])

Then in your controller:

.controller('SampleApp', function ($scope, $location) {$scope.availableList = [];$scope.init = function () {    $scope.availableList = data;}

Finally, you have to init everything (order matters):

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  <script src="/path/to/your/angular/js/sample.js"></script>  <script type="text/javascript">      data = <?= json_encode($cproducts); ?>  </script>

Finally initialize your controller and init function.

  <div ng-app="samplerrelations" ng-controller="SamplerApp" ng-init="init();">

By doing this you will now have access to whatever data you stuffed into the global variable.