Fix bug with using title attribute in breadcrumbs directive. (#10171)

src/core_plugins/kibana/public/dashboard/dashboard.html

@@ -8,7 +8,11 @@
         data-transclude-slot="topLeftCorner"
       >
         <!-- Breadcrumbs. -->
-        <bread-crumbs title="getDashTitle()" use-links="true" omit-current-page="true"></bread-crumbs>
+        <bread-crumbs
+          page-title="getDashTitle()"
+          use-links="true"
+          omit-current-page="true"
+        ></bread-crumbs>
       </div>
 
       <!-- Search. -->

src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.html

@@ -3,9 +3,9 @@
     <a class=kuiLocalBreadcrumb__link" href="{{breadCrumbUrl.url}}">{{breadCrumbUrl.breadcrumb}}</a>
   </div>
   <div class="kuiLocalBreadcrumb" ng-if="!useLinks" ng-repeat="breadcrumb in breadcrumbs">
-    {{breadcrumb}}
+    {{ breadcrumb }}
   </div>
-  <div class="kuiLocalBreadcrumb" ng-if="title">
-    {{title}}
+  <div class="kuiLocalBreadcrumb" ng-if="pageTitle">
+    {{ pageTitle }}
   </div>
 </div>

src/ui/public/kbn_top_nav/bread_crumbs/bread_crumbs.js

@@ -8,13 +8,15 @@ const module = uiModules.get('kibana');
 module.directive('breadCrumbs', function ($location) {
   return {
     restrict: 'E',
+    replace: true,
     scope: {
       omitCurrentPage: '=',
       /**
-       * Optional title to append at the end of the breadcrumbs
+       * Optional title to append at the end of the breadcrumbs. Note that this can't just be
+       * 'title', because that will be interpreted by browsers as an actual 'title' HTML attribute.
        * @type {String}
        */
-      title: '=',
+      pageTitle: '=',
       /**
        * If true, makes each breadcrumb a clickable link.
        * @type {String}