ui-sref with multiple parameters to child view not working

Question

I'm using Angular's ui-router on my application to try and route to child views of a main view. Both the main and the child have their own associated IDs. Currently I can navigate to the parent, but my link to the child is not working.

In my Application.js

$stateProvider

//Working Route
.state('Project', {
    url: '/Project/{projectId}',
    views: {
        "ContentMain" : { 
            templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectMainContent.html", 
            controller: function ($stateParams) {
                console.log("Project state hit!"); 
            }
         },
        ...
    }
})

//Non-Working Route
.state('Project.ViewResource', {
    url: '/Resource/:resourceId',
    parent: 'Project',
    views: {
        "ContentMain" : { 
            templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectResourceViewContent.html" 
            controller: function ($stateParams) {
                console.log("Project.ViewResource state hit!"); 
            }
        },
        ...
    }
});

In my HTML:

<!-- Working Link-->
<a ui-sref="Project({ projectId: 5 })"><h3>   My Projects </h3></a>

<!-- Non-working Links -->
<a ui-sref="Project.ViewResource({ projectId: 5, resourceId: 3 })">View Project Resource. </a>
<a ui-sref="Project.ViewResource({ resourceId: 3})">I'm a Resource Image. </a>

The first link works, however when I click either of the "non-working" child links my browser updates to: "Home/Index/#/Project/5/Resource/3" which is the desired route, however the page content

Any idea where I'm going wrong?

Edit1: To add the lines of code in the 'views' object which should be swapping out.

Edit2: To further demonstrate the issue, I've added the controller code blocks. When I hit the first html link, my console outputs "Project state hit!" When I click either of the non-working links, there is no new output to the console. Ie, the route is likely not being hit.

Answer 1

Figured out what was happening. After taking a closer look at the document on multiple named views here, I realized that my child view was searching for ui-view tags within the parent template, rather than the root template. Essentially, my child was trying to nest within my parent, while my desired behavior was to replace the parent views.

So, to target ui-views within the root, my solution looked like:

.state('Project.Resource', {
    url: '/Resource/{resourceId}',
    parent: 'Project',
    views: {
        "MainControls@":   { templateUrl: "/Scripts/Dashboard/templates/MainControls/MainControls.html" },
        "ContentMain@": {
            ...
         },
         ...
     }
})