ui router multiple named views are not working

Question

I am not able to load my view while using the ui router here is my code sample- Code for my router file -

angular.module('loginApp').config(['$stateProvider', '$urlRouterProvider', 'USER_ROLES',
  function($stateProvider, $urlRouterProvider, USER_ROLES) {
    // For any unmatched url, redirect to /
    $urlRouterProvider.otherwise("/");
    // Now set up the states
    $stateProvider.state('home', {
      url: "/",
      views: {
        'nav': {
          templateUrl: 'templates/parts/nav.html'
        },
        'main': {
          templateUrl: 'templates/home.html'
        }
      },
      data: {}
    });
  }
]);

Code for html view -

<div layout="column">
  <div ui-view="nav"></div>
  <div class="container">
    <div ng-if="currentUser"><b>Welcome</div>
    <div ui-view="main"></div>
  </div>
</div>