title: Angular $routeProvider is breaking the tag
body: <p>Here is my code.</p>
  
  <p>home.html</p>
  
  <pre><code> &lt;!DOCTYPE HTML&gt;
   &lt;html xmlns:th="http://www.thymeleaf.org" ng-app="myApp"&gt;
   &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
    &lt;link rel="stylesheet" type="text/css"
      href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
  
  
  
    &lt;script
     src="https://code.jquery.com/jquery-3.0.0.js"
    integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
     crossorigin="anonymous"&gt;&lt;/script&gt;
  
   &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4      /angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="myCtrl"&gt;
  
  
  
  &lt;div class="container"&gt;
  
      &lt;nav class="navbar navbar-default"&gt;
  &lt;div class="container-fluid"&gt;
  &lt;div class="navbar-header"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Spring Boot Test&lt;/a&gt;
  &lt;/div&gt;
  &lt;ul class="nav navbar-nav"&gt;
    &lt;li class="active"&gt;&lt;a ng-click=""&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="javascript:void(0)" data-ng-click="about()"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="javascript:void(0)" data-ng-click="contact()"&gt;Contact&lt;/a&gt;   &lt;/li&gt;
  &lt;/ul&gt;
  
  
    &lt;/div&gt;
   &lt;/nav&gt;
  
   &lt;div data-ng-view = ""&gt;&lt;/div&gt;
  
  
  
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
  
  &lt;script type="text/javascript"
      src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>script </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var app = angular.module('myApp',[]);
  
  
  app.config(['$locationProvider', '$routeProvider',function     config($locationProvider, $routeProvider) {
            $routeProvider.
              when('/about', {
                templateUrl: 'about.html',
                controller: 'aboutCtrl'
              });
  
  
          }
        ]);
  
      app.controller('aboutCtrl',function($scope){
          console.log("aknk");
      });
  
  
  
  
  
   app.controller('myCtrl',['$scope','$location','$window',    function($scope,$location,$window){
  
  
  
  
  
  $scope.about = function()
  {
      console.log("hello");
      /*$location.path('about');*/
      $window.location.assign('/about');
  }
  
  $scope.contact = function()
  {
      console.log("hello");
      $location.path('/contact');
  }
  
  }]);
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>What i am doing worng? The links on about and contact do not work at all with this code and If I remove $routeProvider code /about call has been sent to the server. Actually what I want is to get the about.html in ng-view div so that I can have common header for all pages.</p>