using UI.Bootstrap. and angular. i want to display the number of rows in an accordion on the panel

Question

I am grabbing and displaying data using angularJS and i have an accordion as well where table of data will be displayed and i can count the rows using {{valdosta.length}}. but i want to display a badge with that in there so that before they open the accordion it will display the number on the panel. other parts of the site use same accorion so i dont want to mess the other one up as it does not need a badge. here is the code for the view, this is one panel as it is redundant to post the others as it is the same. i see a class="badge" but where can i put that {{valdosta.length}} at? im using bootstrap 3 as well

<div ng-controller="MainController">
    <div class="text-center">
        <ul class="nav nav-tabs nav-tabs-google">
            <li class="active">
                <a href="">
                    Rail Car Multi Mill Inquiry
                </a>
            </li>
        </ul>
    </div>
<accordion close-others="oneAtATime">
    <accordion-group heading="Counce" is-open="status.isFirstOpen">

        <table class="table table-striped table table-hover">
            <thead>
                <tr>
                    <th>Ship To #</th>
                    <th>Ship To Mnemonic</th>
                    <th>Ship To Name</th>
                    <th>Order #</th>
                    <th>Load #</th>
                    <th>Rail Car Initials</th>
                    <th>Rail Car #</th>
                    <th>Way Bill #</th>
                    <th>Carrier Name</th>
                </tr>
            </thead>
            <tbody>
                <tr class='clickable-row' data-href='//valcmmsweb.pca.com/DocumentLibrary/' ng-repeat="item in counce">
                    <td>{{item.shipToNumber}}</td>
                    <td>{{item.shipToMnemonic}}</td>
                    <td>{{item.shipToName}}</td>
                    <td>{{item.orderNumber}}</td>
                    <td>{{item.loadNumber}}</td>
                    <td>{{item.railCarInitials}}</td>
                    <td>{{item.railCarNumber}}</td>
                    <td>{{item.wayBillNumber}}</td>
                    <td>{{item.carrierName}}</td>
                </tr>
            </tbody>
        </table>
    </accordion-group>
    </accordion>

Answer 1

Based on what you have provided you can use the <accordion-heading> tag. It's not clear if this view is reused in situations where you don't want the count - if so then you could use a ng-show or ng-if depending on your requirements.

<accordion close-others="oneAtATime">
    <accordion-group is-open="status.isFirstOpen">
        <accordion-heading>
            Counce <span class="badge">{{counce.length}}</span>
        </accordion-heading>

        <!-- the table -->
    </accordion-group>
</accordion>