AngularJS: Best way to handle global variables ($rootScope or global service?) - angularjs

Question

I'm torn between using $rootScope and a global service.
$rootScope feels dirty and comes with all the problem of global variables, so I wanted to use a global service but the Angular FAQ says:
Of course, global state sucks and you should use $rootScope sparingly,
like you would (hopefully) use with global variables in any language.
In particular, don't use it for code, only data. If you're tempted to
put a function on $rootScope, it's almost always better to put it in a
service that can be injected where it's needed, and more easily
tested.
Conversely, don't create a service whose only purpose in life is to
store and return bits of data.
...and that's what I want to use the service for.
For example, I have a navbar that when toggled on mobile screens should add a class to the body and html elements. I handle this with a directive and a controller.
NavbarController:
function NavbarController($rootScope) {
var vm = this;
vm.toggleNav = toggleNav;
$rootScope.navCollapsed = false;
function toggleNav() {
$rootScope.navCollapsed = !$rootScope.navCollapsed;
}
}
As you can see there, I'm using rootScope for the navCollapsed value and in my directive I do this:
function navOpen($rootScope) {
return {
restrict: 'A',
link: function(scope, element) {
scope.$watch(function () {
return $rootScope.navCollapsed;
}, function () {
if ($rootScope.navCollapsed)
element.addClass('nav-open');
else
element.removeClass('nav-open');
});
}
};
}
It works fine, but using $rootScope feels dirty. I would much rather do something like this:
NavbarController:
function NavbarController(globalService) {
var vm = this;
vm.toggleNav = toggleNav;
globalService.navCollapsed = false;
function toggleNav() {
globalService.navCollapsed = !globalService.navCollapsed;
}
}
And in the directive:
function navOpen(globalService) {
return {
restrict: 'A',
link: function(scope, element) {
scope.$watch(function () {
return globalService.navCollapsed;
}, function () {
if (globalService.navCollapsed)
element.addClass('nav-open');
else
element.removeClass('nav-open');
});
}
};
}
Which does the exact same thing except now the value is in a single location and can't be unintentionally altered elsewhere which is better, but according to AngularJS team that is bad practice because it's "bits of data".
What is the best way of going about this? I have other variables with similar functionality that need to be global (able to be accessed in any controller for manipulation), without having to use $rootScope.