I'm a beginner in the world of Angular and programming, seeking guidance on how to learn. I have an HTML page with 5 tabs: "Who," "What," "Where," "When," and "Events." The code snippet below showcases my current setup. Can anyone provide assistance on how to efficiently organize the JSON category entries within my controller and align them with their respective HTML tabs? Any help would be greatly appreciated.

//html
<div id="chartsContainer" class="row">
    <div class="col-xs-12">

            <div id="" class="row">
                <h3 class="pull-left" style="color:white">CHARTS</h3>
                <form ng-submit="filterCharts()" class="pull-right">
                    <!-- Single button -->
                    <div class="btn-group">
                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        all <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Used</a></li>
                        <li><a href="#">Unused</a></li>
                      </ul>
                    </div>
                </form>
            </div>

            <div id="tabMasterContainer" ng-controller="TabsDemoCtrl">

                <tabset vertical="false" type="navType">
                <tab heading="Who">
                <a ng-click="groupBy( 'category' )">Category</a>
                        <div id="chartsList" class="row">

                            <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">

                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                        </div>

                </tab>
                <tab heading="What">
                    <div id="tabContainer">
                    <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>
                </tab>
                <tab heading="When">
                    <div id="tabContainer">
               <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>                  
                </tab>
                <tab heading="Where">
                    <div id="tabContainer">
                <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>
                </tab>
                <tab heading="Events">
                    <div id="tabContainer">
                <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>
                </tab>

              </tabset>
            </div>


    </div>
  </div>




$scope.charts = [
        { id : 1, description: "Date Range", icon : "fa-camera-retro",         category : "When"},

        { id : 2, description: "Time of Day", icon : "fa-cog", category :     "When"},
        { id : 3, description: "Day of Week", icon : "fa-bar-chart-o", category : "When"},
        { id : 4, description: "Age Range", icon : "fa-wrench", category : "Who"},
        { id : 5, description: "who foo", icon : "fa-wrench", category : "Who"},
        { id : 6, description: "what foo", icon : "fa-wrench", category : "What"},
        { id : 7, description: "what foo", icon : "fa-wrench", category : "What"},
        { id : 8, description: "where foo", icon : "fa-wrench", category : "Where"},
        { id : 9, description: "where foo", icon : "fa-wrench", category : "Where"},
        { id : 10, description: "basketball foo", icon : "fa-wrench", category : "Events"},
        { id : 11, description: "Doctor Who Foo", icon : "fa-wrench", category : "Events"},
        { id : 12, description: "You foo", icon : "fa-wrench", category : "Who"},
        { id : 13, description: "Boo foo", icon : "fa-wrench", category : "Events"},
        { id : 14, description: "da bar", icon : "fa-rocket", category : "Where"}
    ]

To process the JSON data effectively, I created this iteration function:

function chartFinder(chartArray, id){
for (var i = 0; i < chartArray.length; ++i) {
    if(id==chartArray[i].key)
       return id[i].value;
}

};