AngularJS access controller $scope from outside
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;
});
Answer
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';
});
});