How can I retrieve an id from one template's controller and use it in another template's controller?

Question

I have an index.html with two templates, product-list and product-details . Initially, the index.html displays the product-list template. Whenever a specific product is clicked, I want to hide this template and show the product-details template.

However, I've got a slight problem. Aside from doing a full redirect to the product details template with the product id in the url, I'm not sure how to pass the id of the product that is selected. Is it possible to pass the id from the product-list controller to the product-details controller (or directive) without doing something like

$location.path('details/' + id);

As in can I simply hide the product-list template and show the selected product-details template?

Answer 1

If the two templates are in the same html file you can hide your product-list template every time a specific product is clicked by setting a variable on your $scope that indicate if a product was clicked... toggle it in your on-click function on each product and then use ng-if / ng-show / ng-hide to show the template you want to show..

if you want to use 2 different controllers you can pass data between them using $stateParams