javascript - Master Detail with Nested JSON -

i want create master detail view nested json , out of ideas. know missing simple here turn help.

this sample of json. there around 50 items same number , letter pattern (e.g. 1a, 30d, etc).

{    "items": [    {       "name": "item 1",       "number: 1       "subcategories": [        {           "name": sub item 1",           "letter: "a",           "description": "a description item..."        }           "name": sub item 2",           "letter: "b",           "description": "a description item..."          }            }           "name": sub item 3"           "letter: "c",           "description": "a description item..."          }        } } 

i have set master page accordion lists items in list when clicked, displays of sub items getting confused when click on sub menu item , routed details page, can view name parameter stored in $state.params. want details page able display description well.

here accordion list:

<div ng-repeat="item in items">               <ion-item class="item-stable"                         ng-click="togglegroup(item)"                         ng-class="{active: isgroupshown(item)}">                   <i class="icon" ng-class="isgroupshown(item) ? 'ion-minus' : 'ion-plus'"></i>                  {{item.name}}               </ion-item>               <ion-item class="item-accordion"                         ng-repeat="item_type in item.subcategories"                         ng-show="isgroupshown(item)"                         ng-click="onselectitems(item_type)">                   {{item_type.name}}               </ion-item>             </div> 

here relevant app.js .config:

  .state('tab.item-listing', {     url:'/item-listing',     views: {       'tab-home': {         templateurl: 'templates/item-listing.html',         controller: 'itemlistingsctrl'       }     }   })    .state('tab.itemdetail', {   url:'/:name',    views: {     'tab-home': {       templateurl: 'templates/item-detail.html',       controller: 'itemlistingdetailctrl'     }   } }) 

here relevant function within itemlistingsctrl controller:

$scope.onselectitems = function(item_type) {          var params = {             name: item_type.name,         };          $state.go('tab.itemdetail', params);          console.log($state.params);  };  }); 

here controller itemlistingdetailctrl:

.controller("itemlistingdetailctrl", function ($scope, itemservice, $stateparams, $state) {   console.log($state.params);    $scope.name = $state.params.name;   }) 

finally, relevant section service.js pulls in json.

.factory('itemservice', function($http,$location) {    var items = [];    return {      getitems: function(){       return $http.get(/path/to/json).then(function(resp){          items = resp.data.items;          return items;        });     },    } }); 

is able lend hand? in advance.