AngularJS - 工具提示不起作用

Question

这是我第一次尝试AngularJS，我通过W3找到了一个例子。我希望用它来为我将为客户工作的新Bootstrap项目创建路由。

问题是它似乎没有加载我正在使用的JavaScript。我不熟悉javascript和DOM，所以不确定为什么这不起作用。

为了展示我正在谈论的内容的一个例子，我删除了所有内容，并尝试使用图像和工具提示。索引页面上的图像可以正常工作，但加载测试页后，工具提示将停止工作。我试图通过开发人员工具跟踪是否存在错误，但没有显示任何内容。

指数：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "main.php"
        })
        .when("/home", {
            templateUrl : "main.php"
        })
        .when("/test", {
            templateUrl : "test.php"
        })
    });
    </script>
    <script>
      $(document).ready(function() {
          $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </head>
  <body ng-app="myApp">
    <p><a href="#!home">Main</a> | <a href="#!test">Test</a></p>
    <p><img src="http://placehold.it/200x200" class="img-responsive" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Test</strong>"></p>
    <div ng-view></div>
  </body>
</html>

测试：

<p><strong>Test</strong></p>
<p><img src="http://placehold.it/200x200" class="img-responsive" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Test</strong>"></p>

在ng-view DIV之前显示索引的工具提示。