title: Partial views in AngularJS
body: <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>