Vues partielles dans AngularJS

Je suis nouveau sur Angulaire et apprécie les conseils.
En gros, j'ai un-à-plusieurs relation - un Category a plusieurs Product,
J'ai la page de mise en page où je afficher différentes vues partielles:

<div class="mainContent">
     <ng-view></ng-view>
</div>

Mon première permet d'afficher la liste des catégories, lorsque l'un d'eux est cliqué, je montre le deuxième point de vue, qui est séparé en deux parties: la liste des catégories, et la liste des produits de la catégorie en particulier, de manière schématique, on dirait:

Mon problème est que je ne peut pas comprendre comment utiliser une autre partielle de la liste des produits parce qu'il veulent les garder séparées .html.

J'ai configuré les routes:

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"
    });
});

Et contrôleurs:

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
});

Donc sur mon première vue - category.htmlj'ai la liste des catégories avec hrefs:

<a href="#/category/{{category.id}}">

Sur le deuxième - categoryDetail.htmlje les catégories de la liste à nouveau, mais avec un autre hrefs:

<a href="#/product/{{category.id}}">

Et sur la dernier vue - product.html je liste les produits.

Jusqu'à maintenant, lorsque je clique sur la catégorie à l'intérieur de categoryDetail.html mon product.html rend dans mainContent div de la mise en page, au lieu - je besoin pour rendre intérieure partielle à l'intérieur de categoryDetail.html. J'ai essayé d'utiliser <ng-view> de nouveau, mais cela ne semble pas être correcte.

source d'informationauteur Gyuzal R