Conditionally choosing view templates based on data from HTML5 localStorage

Question

myApp.run(function(){
    if(!(window.localStorage.storage1)){
        window.localStorage.setItem('storage1', null);
});

<div ng-if="window.localStorage.storage1 == null"> 
    <!-- Show this part of the view , called Part 1-->
</div>

<div ng-if="window.localStorage.storage1 != null"> 
    <!-- Show this part of the view -->
</div>

Now in the home view, when storage1 is set to null (actually the string "null" ) then part1 of the view should be shown and when storage1 's value is updated to a dictionary data type then view part2 should be shown. But it does not. I virtually tried everything. I compared typeof , cast it explicitly, changed the default value given to the storage1 but nothing seems to work.

Answer 1

Angular expressions are evaluated in the context of the scope. See https://docs.angularjs.org/guide/expression

In the controller for the Home View you will need to set something in the scope based off of what is in localStorage, and then use that in your ng-if expression.