title: Angular ui modal unexpected behavior
body: <p>I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.</p>
  
  <p>Here's the code</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html ng-app="MyApp"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;base href='/'&gt; 
      &lt;!-- load bootstrap from CDN and custom CSS --&gt;
      &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
  
  
      &lt;!-- JS --&gt;
      &lt;!-- load angular and angular-route via CDN --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"&gt;&lt;/script&gt;
       &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"&gt;&lt;/script&gt;
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="controller.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;header&gt;
          &lt;div class="navbar navbar-default"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a href="/" class="navbar-brand"&gt;&lt;span class="glyphicon glyphicon-book"&gt;&lt;/span&gt;Testing App&lt;/a&gt;
                  &lt;/div&gt;  
  
                  &lt;ul class="nav navbar-nav navbar-right" ng-controller="ModalController"&gt;
                      &lt;li&gt;&lt;a href="#" ng-click="open('lg')"&gt;Write&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
  
      .config(function($routeProvider, $locationProvider) {
  
          $routeProvider
  
              .when('/', {
                  templateUrl: 'home.html',
                  controller: 'HomeController'
  
              });
  
          $locationProvider.html5Mode(true);  
      });
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>angular.module('MyApp')
  
      .controller('HomeController', function($scope, $location) {
  
          $scope.data = "Hello Angular";
      })
  
  
  
      .controller('ModalController', function($scope, $location, $modal, $log) {
  
          $scope.items = ['item1', 'item2', 'item3'];
  
          $scope.open = function (size) {
  
              var modalInstance = $modal.open({
                  templateUrl: 'modal.html',
                  controller: function() {
  
  
                  },
                  size: size,
                  resolve: {
                      items: function () {
                          return $scope.items;
                      }
                  }
              });
  
              modalInstance.result.then(function (selectedItem) {
                  $scope.selected = selectedItem;
              }, function () {
                  $log.info('Modal dismissed at: ' + new Date());
              });
          };
      });
  </code></pre>
  
  <p>home.html</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h1&gt;Awesome {{ data }}&lt;/h1&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>modal.html (The path that the modal suppose to show);</p>
  
  <pre><code>&lt;h1&gt;Need to show this actually&lt;/h1&gt;
  </code></pre>
  
  <p>The picture, what shows up after i clicked the text that trigger the modal event</p>
  
  <p><img src="https://i.stack.imgur.com/vMWEG.png" alt="enter image description here"></p>