angularJS : make ngClass related with $localstorage

I'm try to implement an angularJS and I would like to make a dynamic class related with my $localstorage.

I have a script define the $localstorage like this :

$localstorage.set('nf-fajr', true); 
$localstorage.set('nf-dhuhr', false);   
$localstorage.set('nf-asr', false); 
$localstorage.set('nf-maghrib', false); 
$localstorage.set('nf-isha', false);

and I want these variables related with this elements

<span ng-class="{icon ion-ios7-bell : nfFajr}" on-tap="toggleNotification('fajr')"></span>

for example, if I change nf-fajr to false, the <span> should be changed to another class.

any suggestion?

Regards.

Suggest storage all this style into the same storage so that you can use only one watch to inspect style storage change:

$localstorage.set('style', JSON.stringify({'nf-asr': false, 'nf-fajr':true, 'nf-dhuhr': false})

Then you can use $watch to inspect this change:

$scope.$watch(function(){
    $localstorage.get('style'); //Maybe you need to parse json string to object.
}, function(newStyle){
    //here to handle change.
}, true);

Here is jsfiddle.

Hope this work for you. : )