Invoke parent controller while loading child controller - angularjs

Question

I have the parent view defined as:
<div ng-app="myProSupMod" ng-controller="DefaultController" class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<img src="~/Content/Images/logo.jpg" />
<b class="projectTitle">Production Support Tool</b>
</div>
</div>
<div ng-show="DefaultProps.UserDivVisible" class="page-header"
style="font-weight:bold;height:30px;border-bottom:1px solid #d1d1d4;width:100%">
<div style="float:right;"><span style="margin-right:10px;">
Welcome
<a class="text-success" href="#">
{{DefaultProps.LoggedInUsername }}
</a></span>|
<a href="#" style="margin-left:5px;" class="text-danger"
ng-click="LogUserOut()">Logout
</a>
</div>
</div>
</div>
<ng-view></ng-view>
</div>
Its controller:
myProSupMod.controller("DefaultController", ['$scope', '$rootScope',
'$location', '$route', function ($scope, $rootScope, $location, $route) {
if (!sessionStorage.getItem("LoggedInUsername")) {
$scope.DefaultProps = {
LoggedInUsername: "",
UserDivVisible: false
};
$location.path('/');
}
else {
$scope.DefaultProps = {
LoggedInUsername: sessionStorage.getItem("LoggedInUsername"),
UserDivVisible: true
};
}
$scope.LogUserOut = function () {
sessionStorage.setItem("UserDivVisible", false)
$location.path('/')
}
}])
And one of my child child controller is like
myProSupMod.controller("LoginController", ['$scope', '$rootScope',
'$uibModal', 'LoginService', '$location', function ($scope, $rootScope,
$uibModal, LoginService, $location) {
$scope.DefaultProps.LoggedInUsername = ""
$scope.DefaultProps.UserDivVisible = false
$scope.Login = {
Username: '',
Password: '',
Error: '',
validateLogin: function () {
$scope.Login.Error = ''
$scope.DefaultProps.LoggedInUsername =
sessionStorage.getItem("LoggedInUsername")
$scope.DefaultProps.UserDivVisible =
sessionStorage.getItem("UserDivVisible")
$scope.Login.Username = $scope.Login.Password = ''
$location.path('/Home')
}
}
}])
The statements
$scope.DefaultProps.LoggedInUsername=sessionStorage.getItem("LoggedInUsername")
and
$scope.DefaultProps.UserDivVisible =sessionStorage.getItem("UserDivVisible")
are really changing the values of the properties in the "Default" controller but routing to an other view both the "Default" controller properties "LoggedInUsername" and "UserDivVisible" are gone.It looks like i may need to have both the above statements in every other view i'm going to navigate to.
Is there an other way?
"Default" view being the parent, the controller is invoked only once at the start of the application upon navigating to other view the "Default" controller is never invoked.
But if i reload any page by clicking "reload" on the browser or hitting "enter" on the URL i see the "Default" controller being invoked, which is what i want to happen when i'm also navigating to other view via angular routing.

Answer 1

For clarity, here is a simplified template:
<div ng-app="myProSupMod" ng-controller="DefaultController">
<div ng-show="DefaultProps.LoggedInUsername">
Welcome {{DefaultProps.LoggedInUsername}}
<button ng-click="LogUserOut()">Logout<button>
</div>
<ng-view></ng-view>
</div>
Make the controller lightweight:
app.controller("DefaultController", function($scope, LoginService) {
$scope.DefaultProps = LoginService.getProps();
$scope.LogUserOut = function () {
LoginService.logout();
};
})
With the functions inside a service, they can be called by any controller and they are encapsulated in a way that makes the code easier to understand, debug, and maintain.