Bootstrap + AngularJS: custom menu behavior

Question

EDIT: added JSFiddle

I'm trying to build a menu or set of options whose (dynamic) details are coming from a server request. The data looks like this (unnecessary data was hidden):

{
    "name" : "root",
    "subOptions" : [{
            "name" : "A",
            "subOptions" : [{
                    "name" : "A1",
                }, {
                    "name" : "B1",
                }, {
                    "name" : "B3",
                }, {
                    "name" : "B4",
                }, {
                    "name" : "B5",
                }
            ]
        }, {
            "name" : "B",
            "subOptions" : []
        }, {
            "name" : "C",
            "subOptions" : [{
                    "name" : "C1",
                }, {
                    "name" : "C1",
                }, {
                    "name" : "C3",
                }
            ]
        }
    ]
}

Using the Bootstrap 3 grid I simply tell how many columns each of these elements should have, and I don't have to worry where/when it will break to present the remaining elements in the lines below. My problem is related with the suboptions, which should be presented on a new line immediately below its parent:

When clicking the 'C' element, it should display its suboptions below it. The same should happen (for example) for the J element with its suboptions being presented below it. If this grid was fixed for 6 elements per line, I'd probably be able to tell where is every parent and where the suboptions for each one of them should be displayed, but this grid must be responsive, meaning that at a certain point it'll have 4, 3 or 2 elements per line.

With all this variables I'm not able to manage the intended behavior.

I'm using Angular ng-repeat to loop through the options:

<div>
    <div class="row">
        <div ng-repeat="option in object.options">
            <div class="container col-lg-4 col-md-4 col-sm-6 col-ms-8 col-xs-12">
                <div ng-click="selectOption(option)">
                    <div class="name"><span>{{option.name}}</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-ms-4 col-xs-4" ng-repeat="option in activeOption.suboptions">
                <button class="btn btn-lg" ng-click="selectSuboption(option)">{{ ::option.name }}</button>
            </div>
        </div>
    </div>
</div>

This way, the suboptions will always appear at the bottom of everything, which is not the desired behavior. So, the questions here are:

• is it possible to achieve this effect as dynamically as possible?
• how can I break the container to "inject" a row?

Sorry for the long post, but I'm trying to provide as much info as I can in order to solve a problem that's been consuming me for a few days now and can't seem to find a answer for it.

Here's a JSFiddle with my current implementation: https://jsfiddle.net/w5xrjhmd/6/

Answer 1

With out spending too much time with styling this is what I came up with as a solution for your problem. I hope it helps

Here it it on codepen http://codepen.io/anon/pen/oXNRzZ?editors=101

<div ng-app="myAppModule" ng-controller="MyController">
  <div class="panel-body">
    <div class="list-group" ng-repeat="s in data">
      <a href="#" class="list-group-item" ng-class="{active: isActive(s)}" ng-click="select(s); showMe = !showMe">{{s.code}}</a>
      <a href="#" ng-show="showMe" ng-repeat="o in s.subOptions" class="btn btn-sm">{{o.code}}</a>
    </div>
  </div>
</div>

This is just the AngularJS I am not including your data set or controller structure I didnt make any changes to it

  $scope.select = function(i) {
    $scope.selected = i;
  };
  $scope.isActive = function(item) {
    return $scope.selected === item;
  };

Here is the HTML for having it in your styling. I think/hope its right.

also here is it on codepen http://codepen.io/anon/pen/vOYoEE?editors=101

<div ng-app="myAppModule" ng-controller="MyController">
  <div ng-repeat="s in data" class="container col-lg-4 col-md-4 col-sm-6 col-ms-8 col-xs-12">
    <button class="btn btn-sm" ng-class="{'btn-info': isActive(s)}" ng-click="select(s); showMe = !showMe">{{s.code}}</button>
    <button href="#" ng-show="showMe" ng-repeat="o in s.subOptions" class="btn btn-sm">{{o.code}}</button>
  </div>
</div>