How can I rotate image in AngularJs - 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);
}

Answer 2

When your button is clicked you handle it in the controller and add a class
Have a look at this
Controller :
$scope.todoClicked = function(id) {
console.log("clicked", id);
if (!$scope.showMoreTab[id]) {
$scope.showMoreTab[id] = true;
angular.forEach($scope.todos, function(todo) {
if (id !== todo.id) {
$scope.showMoreTab[todo.id] = false;
}
});
} else {
$scope.showMoreTab[id] = false;
}
}
View :
<md-button class="md-icon-button md-toggle-icon" aria-label="More" ng-click="todoClicked(todo.id)" ng-class="{'toggled':showMoreTab[todo.id]}">
<i class="material-icons">
keyboard_arrow_down</i>
</md-button>
CSS :
.md-toggle-icon.toggled {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I am using a icon here but you can try it with svg as well.
<md-button class="md-icon-button md-toggle-icon" aria-label="More" ng-class="{'toggled':showMoreTab[todo.id]}" ng-click="todoClicked(todo.id)">
<md-icon md-svg-src="/material-design-icons/navigation/svg/design/ic_expand_more_36px.svg">
</md-icon>
</md-button>