用角度ng单击旋转图标

我正在构建一个可折叠的下拉垂直菜单，除使我无法理解的所有功能外，我已经完成了大多数其他功能。也就是说，旋转图标，使其在打开时显示，在关闭时指向下方。

我有一个可以使用的CodePen。我更新了下面的代码以显示现在最接近解决方案的更改。

这是我的HTML

    

         
             Menu Item
            
        
        

            
                
                    

                        
                            
 {{item.title}}
                        
                    
                
            
        
    
    

         
             Menu Item 2
            
        
        

            
                
                    

                        
                            
 {{item.title}}
                        
                    
                
            
        
    
      

这是我的控制器内部的内容。切换功能是锻炼，我想，将图标旋转附加到此功能以使其一起工作可能是一个好主意。但是我很难弄清楚。我最接近的是下面的此功能。但是它会在一次单击中更改所有图标

$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;
    }
}

AngularJS或JavaScript解决方案都可以。我更喜欢AngularJS。请没有自举建议。这是Angular Material应用程序。它不使用Bootstrap。再次感谢！