title: Angular routing for different layouts
body: <p>How do I load different layouts ?</p>
  
  <p>Currently I have three layouts for my backend, one for <code>admin</code>, one for <code>user</code> and last for <code>teacher</code> i.e <code>adminLayout.html</code>, <code>userlayout.html</code> and <code>teacherLayout.html</code> for dashboards.</p>
  
  <p>I am writing my routes something like this -</p>
  
  <pre><code>app.config(function($routeProvider){
      $routeProvider
          .when('/', {
              templateUrl: 'views/pages/home.html',
              controller: 'homeCtrl'
          })
          .when('/users/login', {
              templateUrl: 'views/users/login.html',
              controller: 'usersLoginCtrl'
          })
          .when('/users/dashboard', {
              templateUrl: 'views/users/dashboard.html',
              controller: 'usersDashCtrl'
          })
          .when('/teachers/login', {
              templateUrl: 'views/teachers/login.html',
              controller: 'teachersLoginCtrl'
          })
          .when('/teachers/dashboard', {
              templateUrl: 'views/teachers/dashboard.html',
              controller: 'teachersDashCtrl'
          })
  });
  </code></pre>
  
  <p>For <code>/users/dashboard</code> I want <code>usersLayout.html</code> and <code>/teachers/dashboard</code> I want teachersLayout.html.</p>
  
  <p>How could I acheive this ?</p>
  
  <p>I tried <code>$window.location.href = "LINK_TO_LAYOUT";</code> but its is taking the whole path in the URL, however I want to my URL like -</p>
  
  <pre><code>mysite.com/teachers/dashboard
  mysite.com/users/dashboard
  mysite.com/admin/dashboard
  </code></pre>