Dynamically transform in css using ng-style

Question

I could not get transform to work when it\'s inside ng-style.

Answer 1

You can't use brace binding inside a JS string inside an attribute. You can append the variable onto the string instead:

<div ng-style="{'transform': 'rotate('+number+'deg)', '-webkit-transform': 'rotate('+number+'deg)', '-ms-transform': 'rotate('+number+'deg)'}">{{number}}</div>

Also, I replaced your double-quotes with singles.

However, you might consider adding a function to your controller to return the appropriate style:

Controller:

// Create a variable to store the transform value
$scope.transform = "rotate(0deg)";
// When the number changes, update the transform string
$scope.$watch("number", function(val) {
    $scope.transform = "rotate("+val+"deg)";
});

HTML:

<!-- We can now use the same value for all vendor prefixes -->
<div ng-style="{'transform': transform, '-webkit-transform': transform, '-ms-transform': transform }">{{number}}</div>

Updated Plunker