Untitled

<!DOCTYPE html>
<html lang="en" ng-app="mainApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="body_controller">
  <p ng-show="loggedin()==true">header footer menu sample</p>
  <div ng-view></div>
</body>

</html>

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'login.html',
      controller: 'main_controller'

    })
    .when('/home', {
      templateUrl: 'home.html',
      controller: 'main_controller'
    });
});

mainApp.controller('body_controller', function($scope, service_example, $location) {
  $scope.loggedin = function(){
    return service_example.get_status();
  };
});

mainApp.controller('main_controller', function($scope, service_example, $location) {
  $scope.login = function() {
    service_example.set_login();
    $location.path('/home');
  };
  $scope.logout = function() {
    service_example.set_logout();
    $location.path('/');
  };
});

//sample only, may use cookies or local storage to maintain session
mainApp.service('service_example', function() {
  var isloggedin = false;

  this.set_login = function() {
    isloggedin = true;
  };
  this.set_logout = function() {
    isloggedin = false;
  };
  this.get_status = function() {
    return isloggedin;
  };
});

<p>Login Page</p>
<button ng-click="login()">login</button>

<p>Home Page</p>
<button ng-click="logout()">logout</button>