rotating an icon with angular ng-click

Question

I am building a collapsable dropdown vertical menu and I've got most of all the functionalities working except one that is eluding me. And that is, rotating the icon so that it shows up when it's open and pointing down when it's closed.

I have a CodePen that you can use. I've updated the code below to show the changes that are now closest to the solution.

Here is my HTML

<div class="cnt">
    <div class="menu-item" ng-click="toggle(1); open1=!open1">
        <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
            <span class="title flex" flex=""> Menu Item</span>
            <i class="fa fa-chevron-down" ng-class="{'fa fa-chevron-down rotate180': open1, 'fa fa-chevron-down': !open1}"></i>
        </md-list>
        <div class="sub-menu" ng-animate="'animate'" >
            <md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data"  >
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </div>
    </div>
    <div class="menu-item" ng-click="toggle(2); open2=!open2">
        <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
            <span class="title flex" flex=""> Menu Item 2</span>
            <i class="fa fa-chevron-down" ng-class="{'fa fa-chevron-down rotate180': open2, 'fa fa-chevron-down': !open2}"></i>
        </md-list>
        <div class="sub-menu" ng-animate="'animate'" >
            <md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </div>
    </div>
</div>      

And here is what's inside my controller. The toggle function is workout and I figured, it would probably be a good idea to attach the icon rotation to this function so that they work together. But I am having a hard time figuring it out. The closest I got to it was with this function below. But it changes all the icons in the same click

$scope.open1 = false; //initial value
$scope.open2 = false; //initial value

$scope.toggle = function(itemPos) {
    if ($scope.menuIsOpen === itemPos) {
        $scope.menuIsOpen = 0;
    }
    else {
        $scope.menuIsOpen = itemPos;
    }
}

Either an AngularJS or JavaScript solution will be fine. I'll prefer AngularJS. No Bootstrap suggestions please. This is an Angular Material application. It doesn't use Bootstrap. Thanks again!

Answer 1

In case you need to animate the opening and closure of the menu icon you could also apply 2 different CSS classes with different CSS transform properties.

And use ng-class accordingly using 2 expressions:

HTML

ng-class="{'fa fa-chevron-down rotate180': open1, 'fa fa-chevron-down rotate-back': !open1}"

CSS CLASSES

.rotate180 {
    display: inline-block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

.rotate-back {
    display: inline-block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all linear 200ms;
    transition: all linear 200ms;
}

CODEPEN

http://codepen.io/alexincarnati/pen/zNEPoW