title: Angular UI nested State template is not loading
body: <p>Index.html</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html ng-app="testApp"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;link rel="Shortcut Icon" type="image/ico" href="img/favicon.png"&gt;
      &lt;link rel="stylesheet" href="styles/vendor.css"&gt;
      &lt;link rel="stylesheet" href="styles/app.css"&gt;
  &lt;/head&gt;
  &lt;body id="wrap"&gt;
  &lt;div ui-view&gt;&lt;/div&gt;
  &lt;script src="js/vendor.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>"use strict";
  var TestApp = angular.module("testApp",["ui.router"])
      .config(["$urlRouterProvider","$stateProvider",function(a,b) {
      a.otherwise("test", {
          url: "/test",
          title: "Test",
          template:"&lt;p&gt;Test&lt;/p&gt;"
      })
  }]);
  </code></pre>
  
  <p>Here is My directory Structure
       testApp
           JS --> app.js
           index.html</p>
  
  <p>Please Correct My Code</p>