Use rootScope variables in my html

You do not need to specify $rootScope in html. You can use it the same way as you use $scope variables

Just update from

<h1>Hello {{yourName}} you are in in {{$rootScope.zoneName}}!</h1>

to

<h1>Hello {{yourName}} you are in in {{zoneName}}!</h1>

This should work:

<h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>

you could inject $rootScope in you controller and then map it to a scope variable like this

$scope.global = $rootScope;

then in your template you could use

<p>$rootscope value of name is {{ global.name }}.</p>

You have to be careful to not uselessly put thing into the $rootScope as it's not considered the best practice to modulate your code