Toggling accordion panel icons with ng-class and ng-click

I would recommend that you check out 'UI Bootstrap' from the AngularUI team. It's a collection of "Bootstrap components written in pure AngularJS".

http://angular-ui.github.io/bootstrap/

Their website features an example which shows their Accordion directive using ng-class to toggle the chevron icons.

http://angular-ui.github.io/bootstrap/#/accordion

Their directive also features a close-others attribute which, if true, will ensure only a single panel is open at any one time.

<accordion close-others="true">

This is what I've tried and it seems to work

In my controller I have

$scope.menuStatus = [   { isOpen : true     },
                        { isOpen : false    }, 
                        { isOpen : false    } ]

In my html I have

<accordion id='cntLeftMenu' close-others='false'>
    <accordion-group is-open='menuStatus[0].isOpen'>
        <accordion-heading class='menu-title'>
            Cars <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[0].isOpen , 'glyphicon-chevron-right': !menuStatus[0].isOpen }"></i> 
        </accordion-heading>
        <ul class='left-menu'>
            <li><a href=''>test1</a></li>
            <li><a href=''>test1</a></li>
            <li><a href=''>test1</a></li>
        </ul>

    </accordion-group>

    <accordion-group is-open='menuStatus[1].isOpen'>
        <accordion-heading class='menu-title'>
            Customers <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[1].isOpen , 'glyphicon-chevron-right': !menuStatus[1].isOpen }"></i> 
        </accordion-heading>
        <ul class='left-menu'>
            <li><a href=''>test1</a></li>
            <li><a href=''>test1</a></li>
            <li><a href=''>test1</a></li>
        </ul>

    </accordion-group>

    <accordion-group is-open='menuStatus[2].isOpen'>
        <accordion-heading class='menu-title'>
            Staff <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[2].isOpen , 'glyphicon-chevron-right': !menuStatus[2].isOpen }"></i> 
        </accordion-heading>
        <ul class='left-menu'>
            <li><a href=''>test1</a></li>
            <li><a href=''>test1</a></li>
            <li><a href=''>test1</a></li>
        </ul>

    </accordion-group>


<accordion>

How about working with CSS? Bootstrap adds a class collapsed on the html element that has the data-toggle="collapse". When the slide opens, it removes this collapsed class. We can then work with css to, for example, rotate the span element (a child of the element that has the data-toggle attribute).

<style>

 button.collapsed span {
  transform: rotate(-90deg);
 }
</style>
<button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo">
 Simple collapsible
 <span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div id="demo" class="collapse">
 Lorem ipsum dolor...
</div>

IMPORTANT NOTE : Ensure collapsed class is added to the element that has the data-toggle="collapse" attribute for this to work smoothly. Otherwise, on initial loading of the element, the span element doesn't rotate as expected the first time.