ng-init with $rootScope variable, initialization issues

Question

I have a rootscope variable

//we keep it false here, on HTML page if any line item is displayed in edittable form,it will be initialized to True
        $rootScope.varToDecideDispalyofSaveButtonOn10A =false;

I am trying to initializing it on markup page

.
.
.
<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="varToDecideDispalyofSaveButtonOn10A='true'">   
.
.
.

Although ng-if here is true and the tr is created, but the variable is not defined, Why?

Answer 1

ng-if This directive creates new child scope. here is the DOC

so you can achieve this by creating a object in rootScope instead of plain variable, then first the angular will search something.varToDecideDispalyofSaveButtonOn10A in the child scope, and after find there is no something.varToDecideDispalyofSaveButtonOn10A in the child scope it will search the something.varToDecideDispalyofSaveButtonOn10A in the parent scope. but if u use a plain variable ( as u tried with out the object) angular will know there is nothing called varToDecideDispalyofSaveButtonOn10A and without searching it in parent scope it will create a child scope variable called varToDecideDispalyofSaveButtonOn10A

<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="something.varToDecideDispalyofSaveButtonOn10A=true"> 

in Controller

$rootScope.something = {};
$rootScope.something.varToDecideDispalyofSaveButtonOn10A =false;

OR

you can archive by referencing the parent scope inside the child scope by using $parent as below

<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="$parent.varToDecideDispalyofSaveButtonOn10A=true"> 

OR

you can achieve this without using ng-init

<tr class="BG8" ng-if="(obj.lineItemEditableForPM ? (varToDecideDispalyofSaveButtonOn10A = true) : false)">

in this case your going to change the value of varToDecideDispalyofSaveButtonOn10A according to value of obj.lineItemEditableForPM. if obj.lineItemEditableForPM true, then angular will search for varToDecideDispalyofSaveButtonOn10Ain the child scope and then the parent scope. because your not supposing to initialize the variable as above two cases. if obj.lineItemEditableForPM false, then just return false without changing the value of varToDecideDispalyofSaveButtonOn10A.

Here is a Demo Plunker

Answer 2

a common pitfall in angular js, is using primitive variables in a scope, and trying to change it from a scope inhering from it, (any scope inherits from $rootScope).

the reason this wont work, is a primitive variable is not a reference (only objects and arrays are references), and therefore, the inherited scope gets a new variable with the same name.

so you should use a object whenever you want to take advantage of scope inheritance (it could actually be a good convention to always do that):

$rootScope.SomeVars = { varToDecideDispalyofSaveButtonOn10A : false };

and in the view

<tr class="BG8" ng-if="(obj.lineItemEditableForPM)" ng-init="SomeVars.varToDecideDispalyofSaveButtonOn10A='true'">