Динамическое преобразование в css с использованием ng-стиля

Я не мог заставить transform работать, когда он внутри ng-style.

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div style="transform: rotate(3deg);-webkit-transform: rotate(3deg);-ms-transform: rotate(3deg)">Test</div>
    <div ng-style="{"transform": "rotate({{number}}deg)", "-webkit-transform": "rotate({{number}}deg)", "-ms-transform": "rotate({{number}}deg)"}">{{number}}</div>
    <input type="number" ng-model="number" value=1>
  </body>

</html>

Ссылка: http://plnkr.co/edit/txSzAKxLDq48LVitntro?p=preview

Если я изменил номер input, верхний div должен измениться и spin одновременно. Он должен выглядеть над словом Тест, когда он имеет значение 3.

Итак, как заставить transform работать в этом случае?

Спасибо.

// 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)"; });

Ответ 1