javascript - angular.js app with linked panels -

i learning angular , ok basics have situation have 3 interlinking panels or panes. select category first pane, populates list of products in second pane choosing 1 of these populates third pane product details.

i have mocked structure here: https://jsfiddle.net/pbpxexsa/1/

whats best approach constructing this?

i added routing have meaningfull url, can have 1 ng-view.

i have looked @ ui.router , looks might fit

could have separate controller on each pane , observer watch changes have read avoided.

i aspect of directives , understand provide <product-pane></product-pane> , <product-details></product-details> directives again not sure how link them.

the books reading don't seem cover kind of architecture, missing obvious?

thanks in advance.

i think might over-thinking slightly. have 3 panels viewing single data group, trying engineer solution necessary when each panel showing different data. can easily design single controller.

just generic mockup (not working or tested, should give idea):

<div class="category-pane"> <ul>   <li ng-repeat="category in categories"        ng-click="setselectedcategory(category)">{{category.name}}</li> </ul> </div>  <div class="products-pane"> <ul>   <li ng-repeat="product in selectedcategory.products"       ng-click="setselectedproduct(product)">{{product.name}}</li> </ul> </div>  <div class="product-details-pane>   {{selectedproduct.name}}   {{selectedproduct.info}}   .... </div> 

in controller:

$scope.setselectedcategory= function(category){   $scope.selectedcategory = category;   $scope.selectedproduct = null;  //remove whatever in product pane };  $scope.setselectedproduct= function(product){   $scope.selectedproduct = product; };