How to toggle Angularjs ng-show without $rootScope - angularjs

Question

As you might have read on the Angularjs FAQ the use of $rootScope is not encouraged. Therefore, a service is more appropriate for storing data that would be shared later on between controllers.. But I couldn't make the ng-show directive work without the use of $rootScope.
Here's what i'm doing;
index.html
<div ng-controller="GlobalCtrl">
<div ng-show="showSettings"></div>
<aside ng-show="showSettings" >
<h1>Some text</h1>
<button ng-click="closeSettings()">Ok</button>
</aside>
</div>
app.js
(I bootstrap the app since I'm developing for cordova.. code truncated)
var app = angular.module('tibibt', ['tibibt.controllers', 'tibibt.filters', 'tibibt.services']);
angular.element(document).ready(function () {
angular.bootstrap(document, ['tibibt']);
});
services.js
/* Create an application module that holds all services */
var tibibtServicess = angular.module('tibibt.services', []);
/* Global service */
tibibtServicess.service('globalService', function () {
this.Data = {
showSettings: 'false'
};
this.getAll = function () {
return this.Data;
};
this.setSettings = function (val) {
this.Data.showSettings = val;
};
});
controllers.js
/* Create an application module that holds all controllers */
var tibibtControllers = angular.module('tibibt.controllers', []);
tibibtControllers.controller('GlobalCtrl', function ($scope, globalService) {
// Get initial value
$scope.showSettings = globalService.getAll().showSettings;
console.log('Settings initially set to -> ' + globalService.getAll().showSettings);
// Open settings menu
$scope.openSettings = function () {
globalService.setSettings('true');
console.log('Settings set to -> ' + globalService.getAll().showSettings);
};
// Close settings menu
$scope.closeSettings = function () {
globalService.setSettings('false');
console.log('Settings set to -> ' + globalService.getAll().showSettings);
};
});
The console shows the changes but the ng-show doesn't bind/update to this changes!

Answer 1

this is only an assignment thats evaluated once:
$scope.showSettings = globalService.getAll().showSettings;
so the value will never change.
there are at least to possible solutions:
assign the service to the scope: $scope.settings = globalService. Now you may access the service in your view:
ng-show="settings.getAll().showSettings"
or register a watch by yourself:
$scope.showSettings = false;
$scope.$watch(globalService.getAll().showSettings, function(newValue){
$scope.showSettings = newValue;
});

Answer 2

Try:
$scope.Data = globalService.getAll();
HTML:
<div ng-controller="GlobalCtrl">
<div ng-show="Data.showSettings"></div>
<aside ng-show="Data.showSettings" >
<h1>Some text</h1>
<button ng-click="closeSettings()">Ok</button>
</aside>
</div>
DEMO
Explanation:
This line $scope.showSettings = globalService.getAll().showSettings; assign data by value => the value of showSettings is copied to $scope.showSettings => they are 2 separate blocks of memory. When you change the globalService.Data.showSettings, $scope.showSettings is not updated because it's another block of memory.
Changing to $scope.Data = globalService.getAll(); assign data by reference => they point to the same block of memory.