从routeprovider内部设置ng-src以在其他地方显示图像

Question

首先，我的ng-route设置很好，并且ng-view表现良好。 我想要的是拥有一个标题图像，该标题图像将在选择导航菜单时发生变化，并且视图的更改将在具有ng-view的页面的较低位置更改。

下面发布的

代码是部分工作，但非常详细。我希望有一个敏锐的眼神能立即记录我的问题。

我需要带有img ng-src的div来显示基于每个菜单选项的路由控制器的图像。

如果这不可能，还有另一种方法吗？

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

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

  .when('/book', {
    templateUrl : 'book.html',
    controller  : 'BookController'
  })

  .when('/sails', {
    templateUrl : 'sails.html',
    controller  : 'SailsController'
  })

  .when('/contact', {
    templateUrl : 'contact.html',
    controller  : 'ContactController'
  })

  .otherwise({redirectTo: '/'});
});

app.controller('HomeController', function($scope) {
  
  var image = {
    image: "img/img/seagate photo shoot--19.jpg"
  };

  $scope.image = image;
});

<div class="container">
        <a class="navbar-brand" href="#"><img src="img/Seagate Logo RGB.png" width="200px" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/book">Book Now</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/sails">Dining</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/contact">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link desk" href="https://www.facebook.com/Seagate-Motel-Moonta-Bay-656235891127047" >
                <img src="img/flogo.png" width="25px" alt="facebook" align="middle">
              </a>
              <a class="nav-link mobile" href="fb://page/Seagate-Motel-Moonta-Bay-656235891127047" >
                <img src="img/flogo.png" width="25px" alt="facebook" align="middle">
              </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://www.instagram.com/accounts/login/?hl=en" >
                  <img src="img/Instagram.png" width="25px" alt="Instagram" align="middle">
                </a>
              </li>
          </ul>
        </div>
      </div>
    </nav>

    <header>
      <div class="headerimg">
        <img ng-src="{{image.image}}" alt="">
      </div>
    </header>

    <section class="py-5">
        <div class="container">
            <div ng-view></div>
        </div>
    </section>

任何帮助将不胜感激