Information in the block is not updated until the second request to the server

The application start page given by the server looks like this:

Index.cshtml

 <div ng-controller="LoginController"> <ul class="nav navbar-nav navbar-right" ng-hide="!credentials.isAuthenticated"> <li><a>Hello {{credentials.Name}}!</a></li> <li><a ng-click="logout()">Logout</a></li> </ul> <ul class="nav navbar-nav navbar-right" ng-show="!credentials.isAuthenticated"> <li><a ng-click="login()">Login</a></li> </ul> </div> <div class="container-fluid"> <ng-view></ng-view> </div> 

The main module and configuration of the application routing is as follows.

 var cscpApp = angular.module('cscpApp', ['ngRoute']) .config(function($routeProvider){ $routeProvider.when('/', { templateUrl: '/angular/templates/operation/operations.html', controller: 'OperationController' }); $routeProvider.when('/account/login', { templateUrl: '/angular/templates/account/login.html', controller: 'AccountController' }); }); 

made the next service responsible for entering / exiting and receiving information about the current session ( getCredentials() method returns json with user information (name, roles))

 cscpApp.factory('AccountService', function($http){ return { login: function(loginViewModel){ let url=''; return $http.get(url, {model: loginViewModel}); }, logout: function(){ let url =''; return $http.post(url); }, getCredentials: function(){ let url=''; return $http.get(url); } } }); 

LoginController

 cscpApp.controller('LoginController', function($location, accountService){ accountService.getCredentials().then(function(result){ $scope.credentials = result.data; }); $scope.login = function(){ $location.path('/Account/Login'); }; $scope.logout = function(){ accountService.logout().then(function(){ $location.path('/'); }); }; }) 

Accountcontroller

 cscpApp.controller('AccountController', function($scope, $location, accountService){ $scope.loginViewModel={}; $scope.login = function(){ let url = ''; accountService.login($scope.loginViewModel).then(function(){ $location.path('/'); }); }; }); 

And everything almost works: when entering / exiting to / from the application, the state of the session state display block is not updated - for the authorized user, a greeting and a Logout button, for an unauthorized user, the Login button.

Tell me how to rewrite the code so that the specified block is updated in a timely manner and not after a second request to the server.

PS: I will be very grateful for the criticism of the code with explanations why so and not so.