AngularJS access controller $scope from outside

angularjs, angularjs-scope

Solution

Without seeing the markup, I guess the scope of MenuSideController is a child scope to the scope you are selecting.

While it is possible to traverse down the tree like this (assuming the scope we want is the first child):

var appElement = document.querySelector('[ng-app=theApp]');
var appScope = angular.element(appElement).scope();
var controllerScope = appScope.$$childHead;
console.log(controllerScope.user);

It is simpler to just select the element where the specific controller is attached.

Assuming you are using the `ng-controller` directive:

<body ng-controller="MenuSideController"></body>

Do instead:

var controllerElement = document.querySelector('body');
var controllerScope = angular.element(controllerElement).scope();
console.log(controllerScope.user);

Demo: http://plnkr.co/edit/WVNDG9sgYgoWaNlrNCVC?p=preview

angular.element(document).ready(function() {

  var appElement = document.querySelector('[ng-app=theApp]');
  var appScope = angular.element(appElement).scope();

  console.log('Traversing from appScope to controllerScope:', appScope.$$childHead.user);


  var controllerElement = document.querySelector('body');
  var controllerScope = angular.element(controllerElement).scope();

  console.log('Directly from controllerScope:', controllerScope.user);


  controllerScope.$apply(function() {
    controllerScope.user.zoomlvl = '10';
  });
});

Problem

``` var theApp = angular.module('theApp', []); var app = angular.module('theApp', ['ui.bootstrap']); app.controller('MenuSideController', ['$scope','SnazzyService','$modal','$log', function($scope, SnazzyService, $modal, $log) { $scope.user.zoomlvl = '2'; }]); ``` I have the above controller and it sets a `$scope` which I can only ever access the values from inside. But I seen somewhere that using the below I would be able to access the `$scope` but when I `console.log($scope)` the `$scope.user.zoomlvl` it doesn't exist. I cannot figure out how to access the `MenuSideController` $scope and update that with the `valZoom` variable. ``` var appElement = document.querySelector('[ng-app=theApp]'); var $scope = angular.element(appElement).scope(); console.log($scope); $scope.$apply(function() { $scope.user.zoomlvl = valZoom; }); ```

Original source