how to avoid to use watchers in my controller? - angularjs

Question

Ok i know that isn't a good practice to put a watcher inside a controller, but in this case how can i avoid to use watcher?
ps: $rootscope it's not a option ok?
here is the code:
plunker
Edit - here what i did:
plunker
And here is the js code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, mainService) {
var flag = false;
$scope.btn = function () {
flag = !flag;
mainService.setData(flag);
}
});
app.controller('DemoOneCtrl', function($scope, mainService) {
$scope.name = 'World';
$scope.mainService = mainService;
$scope.show = false;
$scope.$watch('mainService.getData()', function (data) {
$scope.show = data;
});
});
app.service('mainService', function () {
var data = false;
this.setData = function (str) {
data = str;
};
this.getData = function () {
return data;
};
});
And html:
<div ng-controller="MainCtrl">
<button ng-click="btn()">GO!</button>
</div>
<div ng-controller="DemoOneCtrl">
<p ng-show="show">Hello World</p>
</div>

Answer 1

One way to do it is to bind your ng-show to a service function.
app.controller('MainCtrl', function($scope, mainService) {
var flag = false;
$scope.btn = function () {
flag = !flag;
mainService.setData(flag);
}
});
app.controller('DemoOneCtrl', function($scope, mainService) {
$scope.name = 'World';
$scope.mainService = mainService;
$scope.show = mainService.getData;
});
app.service('mainService', function () {
var data = false;
this.setData = function (str) {
data = str;
};
this.getData = function () {
return data;
};
});
Notice how $scope.show is set to mainService.getData. Now you can bind show() to ng-show.
<p ng-show="show()">Hello World</p>
No $watch needed.
Demo