Angular: got undefined value when assign new variable with $rootScope variable

Question

As mentioned on title, I have small issue to assign new variable with $rootScope variable.

I have variable $rootScope.adulttotTicket with value 2. the value is int. So what I want is just to assign new variable newVal to $rootScope.adulttotTicket variable.

<p data-ng-init="newVal = $rootScope.adulttotTicket"></p>

but when I output variable newVal, it show nothing on my browser. So I try to edit at plunker, so I found out the value newVal is undefined. I don't have any idea what to do here.

newVal should easily have value 2 from $rootScope.adulttotTicket. but I got nothing. see on this plunkr plunkr

Hope get idea from anyone. thanks !

Answer 1

Access $rootScope in view by using $root instead:

<p data-ng-init="newVal = $root.adulttotTicket"></p>

I updated your plunkr and it does work fine.

Answer 2

When referring to $rootScope in a view use $root instead:

<p data-ng-init="newVal = $root.adulttotTicket"></p>

UPDATE

The reason why the above does not work is because you are not in a scope and so have no $scope to access the $root of! To fix you can declare your variable on the $rootScope in a run block as follows:

angular.module('myModule').
run(function($rootScope) {
    $rootScope.adulttotTicket = 'unassigned';
});

You can then access this in the view (with no reference to $root or $rootScope) as follows:

<p data-ng-init="newVal = adulttotTicket"></p>