I have a component named histogram demo which includes a distinct controller with a variable known as $scope.selectedElements. I aim to monitor this variable in the primary appCtrl controller. How can I achieve access to this variable without using $rootScope.
Main HTML
<html lang="en-US" ng-app="histogram-test" ng-controller="appCtrl">
<div class="histogram-container"> <histogram-demo options = "options" data="data"></histogram-demo></div>
</html>
App.JS
angular
.module('histogram-test')
.config(function ($httpProvider, usSpinnerConfigProvider) {
$httpProvider.defaults.withCredentials = true;
usSpinnerConfigProvider.setDefaults({
// see http://spin.js.org/
color: 'white',
radius: 30,
width: 8,
length: 16,
shadow: true,
});
})
.controller('appCtrl', function ($scope, appConfig, $rootScope, auth, $state) {
/** At this point, I am looking to observe $scope.selectedElements in Component.js **/}
Component.JS
angular
.module('histogram-test').component('histogramDemo', {
bindings: {
data: "=",
options: "=",
},
templateUrl: templateUrl,
controller: controller,
controllerAs: 'vm',
});
function controller($state, $scope) { ...
$scope.selectedElements = []; ...}