Partial views in AngularJS
<p>I'm new to Angular and would appreciate any advice.
Basically, I have one-to-many relationship- one <code>Category</code> has several <code>Product</code>, 
I have the layout page where I render different partial views:</p>

<pre><code>&lt;div class="mainContent"&gt;
     &lt;ng-view&gt;&lt;/ng-view&gt;
&lt;/div&gt;
</code></pre>

<p>My <strong>first</strong> view shows the list of categories, when one of them is clicked, I show the <strong>second</strong> view, which is separated to two parts: list of categories, and list of products of particular category, schematically it looks like:</p>

<p><a href="https://i.stack.imgur.com/A2qmF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/A2qmF.png" alt="enter image description here"></a></p>

<p>My problem is that I cannot figure out how to use another partial for the list of products because want to keep them in separate .html.</p>

<p>I configured routes:</p>

<pre><code>app.config(function($routeProvider, $locationProvider) {
$routeProvider
    .when('/category', {
        templateUrl: 'category.html',
        controller: 'categoryController as catCtrl'
    })
    .when('/category/:id', {
        templateUrl: 'categoryDetail.html',
        controller: 'categoryDetailController as catDetailCtrl'
    })       
    .when('/product/:category_id', {
        templateUrl: 'product.html',
        controller: 'productController as productCtrl'
    })
    .otherwise({
        redirectTo: "/category"
    });
});
</code></pre>

<p>And controllers:</p>

<pre><code>app.controller("categoryController", function($http)
{
    var vm = this;
    vm.categories = somedata;
});
app.controller("categoryDetailController", function($http, $routeParams)
{
   var vm = this;
   vm.category = somedata;//current category from REST api, using $routeParams.id
});
app.controller("productController", function($http, $routeParams)
{
   var vm = this;
   vm.products = somedata;//product list of current category using $routeParams.category_id
});
</code></pre>

<p>So on my <strong>first</strong> view - <code>category.html</code>, I have the list of categories with hrefs:</p>

<pre><code>&lt;a href="#/category/{{category.id}}"&gt;
</code></pre>

<p>On the <strong>second</strong> - <code>categoryDetail.html</code>, I list categories again but with another hrefs:</p>

<pre><code>&lt;a href="#/product/{{category.id}}"&gt;
</code></pre>

<p>And on the <strong>last</strong> view - <code>product.html</code> I list the products.</p>

<p>Till now, when I click on category inside <code>categoryDetail.html</code> my <code>product.html</code> renders in <code>mainContent</code> div of the layout, instead - I need it to render as inner partial inside <code>categoryDetail.html</code>. I tried to use <code>&lt;ng-view&gt;</code> again, but this does not seem to be correct.</p>