Change content from a tab index selected

In response of : http://stackoverflow.com/questions/28302995/angularjs-ng-repeat-2d-array-and-display-only-certain-values-based-on-index/28303719#28303719

by optyler

HTML

<section ng-app="App" ng-controller="Ctrl">
    <nav>
        <ul>
          <!-- Directive ngRepeat creates a new scope for each iteration, 
               so you need to reference your variables in parent scope. -->
            <li ng-repeat="tab in skeleton.tabs"
                ng-click="$parent.curIndex = $index"
                ng-class="{active: $index === curIndex}"><a>{{ tab.name }}</a>
            </li>
        </ul>
    </nav>
    
    <div id="field">
        <div ng-repeat="section in skeleton.tabs[curIndex].sections">
            {{ section.name }}
            
            <div ng-repeat="child in section.childs" style="color: {{child.color}}">
                {{ child.name }}
            </div>
        </div>
    </div>
</section>

CSS

ul {
    list-style-type: none;
}
ul li {
    float: left;
    width: 32.5%;
    border: 1px solid lightgray;
    cursor: pointer;
}
ul li.active {
    background-color: green;
}

JavaScript

var app = angular.module('App', []);

app.controller('Ctrl', function ($scope) {

    $scope.skeleton = {
        tabs: [{
            name: 'tab 1',
            sections: [{
                name: "parent section of tab 1",
                childs: [{
                    name: "child",
                    color: "red"
                }, {
                    name: "child",
                    color: "orange"
                }]
            }]
        }, {
            name: 'tab 2',
            sections: [{
                name: "parent section of tab 2",
                childs: [{
                    name: "child",
                    color: "yellow"
                }, {
                    name: "child",
                    color: "green"
                }]
            }]
        }, {
            name: 'tab 3',
            sections: [{
                name: "parent section of tab 3",
                childs: [{
                    name: "child",
                    color: "blue"
                }, {
                    name: "child",
                    color: "violet"
                }]
            }]
        }]
    };
        
    // defaults
    $scope.curIndex = 0;
});