AngularJS using ng-repeat to display Hierarchical Data

Question

So I've been trying to build a nice way to represent hierarchical data in my application. I've created a slide effect for some bootstrap badges I am using to display some sub-categories using AngularJS.

I've created (with some help from you stackoverflow-ers!) the following example which works for data of the type parent and child. ie. You can't be a parent and child at the same time, which is needed for my real world example.

  <ul>
    <li ng-repeat="category in categories"
        ng-init="isChild = category.category_type == 'child'"
        ng-show="category.category_show"
        class="badge-slider">

      <span class="badge {{ isChild ? 'badge-c' : 'badge-p' }}"
            ng-click="isChild || updateResults(category)"
            ng-bind="category.category_name">
      </span>

    </li>
  </ul>

I am struggling to understand what is the best way to change the code so it is able to work for the additional 'parent and child' category_type. This 'parent and child' category_type is needed for creating a way to browse a directory structure.

In the example above, it relies on the boolean value 'isChild' and the ternary operator, which doesn't work when we introduce the 'parent and child' category_type.

Anyone got any ideas?

Here is a link to a PLNKR which demonstrates the sliding functionality working for simple the parent-child relationship: http://plnkr.co/edit/9CiXW1YAoPj80x6PtBW3

EDIT 1:

I've created another PLNKR to handle the 3-tier nature of the hierarchical relationship. It works fine, except it doesn't display 'parent and child' elements with the corresponding badge.... http://plnkr.co/edit/YoRI578GHE91t6torCUt

Answer 1

Here is how I solved this:

1. Modified categories data structure
2. Created inline angular template in html file
3. Create new CSS class for "parent and child" elements

You can view the working Plunker

Here is a Snapshot of the result: