Q:

How to load/render nested UI-Views in UI-Router

I have an application with one page called index.html. This page is the main page inside the application which I load my partials into. 
Here is my Index.html:
<body>
    <!--<div id="view" ng-view></div>-->
    <div id="view" ui-view></div>
</body>

I want to load a Partial into this but then a partial into the partial i have just added.
The partial i want to add in is called dashboard.html and should be called when /dashboard routing is hit. Then I want to load a partial into the UI-View inside dashboard.html.
I don't know what other information I would need to supply to make this happen?
EDIT:
    .state('dashboard', {
        url: '/dashboard',
        templateUrl: 'partials/dashboard.html',
        controller: 'dashboard'
    })
    .state('dashboard.item', {
        //url: '/dashboard/calender',
        templateUrl: 'partials/calender.html',
        controller: 'aceTrackerDash'
    })

A:

Its good to define nested states for this purpose . When the application is in a particular state — when a state is "active" — all of its ancestor states are implicitly active as well. Below, when the "contacts.list" state is active, the "contacts" state is implicitly active as well, because it's the parent state to "contacts.list" . So all nested defined views are loaded in their proper position:
Example : 
$stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope){
      $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
    }
  })
  .state('contacts.list', {
    templateUrl: 'contacts.list.html'
  });

<!-- index.html -->
<body ng-controller="MainCtrl">
   <div ui-view></div>
</body>

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
  <li ng-repeat="contact in contacts">
    <a>{{contact.name}}</a>
  </li>
</ul>

Plunker : http://plnkr.co/edit/7FD5Wf?p=preview
Also take a look at this : 
Angular-UI Router: Nested Views Not Working

