How can I rotate image in AngularJs

Question

Here is my code: How can I rotate only the svg-arrow with angular on element box click ?

<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
  <md-card-content layout="row" layout-align="start center">
    <img src="../assets/icons/cd-icon-arrow.svg" class="buildrag-toggle">
    <h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
    <md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)">
      <md-icon>add_circle_outline</md-icon>
    </md-button>
  </md-card-content>
</md-card>

Here is my button

Answer 1

Use ng-class to toggle a class when the button is clicked. Then use this class in css to rotate the image.

<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
  <md-card-content layout="row" layout-align="start center">
    <img src="../assets/icons/cd-icon-arrow.svg" ng-class="{'rotate': rotateImg}" class="buildrag-toggle">
    <h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
    <md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)" ng-click="rotateImg = !rotateImg">
      <md-icon>add_circle_outline</md-icon>
    </md-button>
  </md-card-content>
</md-card>


.rotate {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}