Angular Ui Router Nested Views Issue

I'm having some issues grokking how Angular UI Router nested views work. My $stateProvider looks like this: $stateProvider .state('login', { url: '/login', views: { 'main':

Solution 1:

Just use absolute naming in the second view def:

// instead fo this// 'content' : {// use this'content@dashboard' : {
    templateUrl: 'static/templates/partials/dashboard-content.html',
    controller: 'DashboardContentCtrl'
}

The doc reference (and a small cite from it):

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

You can also check this for more explanation and working plunker

• Angular UI Router - Nested States with multiple layouts
• ui router - nested views with shared controller (for some details about nesting)