title: How do you rotate image in angularjs
body: <p>Hi I have an image that I want to rotate.  There are two buttons left and right which rotate the image 45 degrees in opposite directions.  I tried creating a directive using jquery rotate library but it doesn't work.  Help?</p>
  
  <p>directive.js</p>
  
  <pre><code>.directive('rotate', function() {
  return {
      restrict:'A',
      link: function(scope, element, attrs) {
        console.log('hi');
          // watch the degrees attribute, and update the UI when it changes
          scope.$watch(attrs.degrees, function(rotateDegrees) {
              console.log(rotateDegrees);
              //transform the css to rotate based on the new rotateDegrees
    element.rotate(rotateDegrees);    
  
          });
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p>template.html</p>
  
  <pre><code>&lt;p&gt;&lt;img degrees='angle' rotate id='image' src='myimage.jpg'/&gt; &lt;/p&gt;
  &lt;a ng-click="rotate('-45')"&gt;Rotate Left&lt;/a&gt;
  &lt;a ng-click="rotate('45')"&gt;Rotate Right&lt;/a&gt;
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>   $scope.rotate= function(angle) {
  
     $scope.angle=angle;
      };
  </code></pre>