title: Load Pug Views with UI router
body: <p>I am trying to load jade views using the mean stack, esp using angular UI router, and pug is just jade(in case if you were unaware of the namechange)
  my folder structure looks something like this</p>
  
  <pre><code>|-- bin
  |   `-- www
  |-- bower.json
  |-- models
  |   `-- schools.js
  |-- mysession.vim
  |-- node_modules
  |   |-- body-parser
  |   |-- cookie-parser
  |   |-- debug
  |   |-- express
  |   |-- gulp
  |   |-- mongoose
  |   |-- mongoose-currency
  |   |-- morgan
  |   |-- pug
  |   `-- serve-favicon
  |-- note.txt
  |-- package.json
  |-- public
  |   |-- css
  |   |-- img
  |   |-- includes
  |   |-- js
  |   |-- vendor
  |   `-- views
  |-- routes
  |   |-- dashboard.js
  |   |-- index.js
  |   `-- users.js
  `-- server.js
  </code></pre>
  
  <p>The views to be rendered are inside /public/views/partials </p>
  
  <p>and my app.js(angular) and server.js(express) looks something like this</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'use strict';
  angular.module("myedu",['ui.router'])
      .config(function($stateProvider, $urlRouterProvider){
  
          $stateProvider
              .state('dashboard',{
              url:'dashboard',
              views: {
                          head: 'assadashboard'
                      }
              })
  
              .state('add',{
              url: 'dashboard/add',
              views :{
                          head: "/partials/add"
                      }
              })
  
              .state('modify',{
              url: 'dashboard/modify',
              views :{
                          head: "/partials/modify"
                      }
              });
              //$urlRouterProvider.otherwise("/dashboard");
      });
  </code></pre>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>//I HAVE CUT DOWN REQUIRE STATEMENTS AND SOME MORE OBVIOUS LINES
  
  var app = express();
  
  // view engine setup
  app.set('views', path.join(__dirname, 'public/views'));
  app.set('view engine', 'pug');
  
  app.use(express.static(path.join(__dirname, 'public')));
  
  
  //TO GET AND RENDER PARTIAL VIEWS  
  //SEE THIS PART SO
  app.get('/partials/:name',function (req,res) {
     res.render('partials/'+req.params.name);
  });
  
  //THE CATCH ALL ROUTE
  app.get('*',function(req,res){
      res.render("index");
  });
  
  
  //THIS GOES OFF TO /bin/www to have the express server run
  
  
  module.exports = app;
  </code></pre>
  
  <p>Now that these are shown; 
  Here are shot pug templates that I've for layout and index and the one of the partials.</p>
  
  <p><strong>layout.pug</strong> /public/includes/layout.pug
  This loads the JS scripts from another file named scripts.pug in the same directory</p>
  
  <pre><code>doctype html
  html(ng-app="myedu")
    head
      title= title
      link(rel='stylesheet', href='/vendor/semantic/semantic.min.css')
      link(rel='stylesheet', href='/css/style.css')
    body
      div(class="ui grid")
        div(class="three wide column adminside") 
          h2 Welcome to MYEDU
        div(class="eleven wide column") 
          block content 
      include scripts
  </code></pre>
  
  <p><strong>index.pug</strong> /public/views/index.pug</p>
  
  <pre><code>extends ../includes/layout.pug
  
  block content
    div(ui-view="head")
  </code></pre>
  
  <p><strong>modify.pug</strong> (this is a partial that I am trying to render, it lives in /public/views/partials)</p>
  
  <pre><code>p This is the json with modified data
  h2 I am a partial
  </code></pre>
  
  <p>I hope I was able to state my problem correctly, I am struggling with this for several days now; I am able to get results with ngRoute but problems are with uiRoute.</p>