title: Dynamically transform in css using ng-style
body: <p>I could not get <code>transform</code> to work when it's inside <code>ng-style</code>.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;div style="transform: rotate(3deg);-webkit-transform: rotate(3deg);-ms-transform: rotate(3deg)"&gt;Test&lt;/div&gt;
      &lt;div ng-style="{"transform": "rotate({{number}}deg)", "-webkit-transform": "rotate({{number}}deg)", "-ms-transform": "rotate({{number}}deg)"}"&gt;{{number}}&lt;/div&gt;
      &lt;input type="number" ng-model="number" value=1&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Link: <a href="http://plnkr.co/edit/txSzAKxLDq48LVitntro?p=preview">http://plnkr.co/edit/txSzAKxLDq48LVitntro?p=preview</a></p>
  
  <p>If I change the <code>input</code> number the top div should change and <strong>spin</strong> at the same time. It should look like the word <strong>Test</strong> above it when it has value of 3.</p>
  
  <p>So how to get <code>transform</code> to work in this case?</p>
  
  <p>Thanks.</p>