title: Angular ng-src change animation
body: <p>I've read <a href="https://stackoverflow.com/questions/25719408/angularjs-animate-image-on-src-change">this post</a> to find out how to animate the change of <code>ng-src</code>. This doesn't seem to work however, only the first time when loading the page.</p>
  
  <p>I want to create an animation when the <code>ng-src</code> of an image changes, and came up with the following directive:</p>
  
  <pre><code>myApp.directive("imageChange", function ($timeout) {
      return {
          restrict: "A",
          scope: {},
          link: function (scope, element, attrs) {
              element.on("load", function () {
                  $timeout(function () {
                      element.removeClass("ng-hide");
                      element.addClass("ng-show");
                  }, 500); // This also is shitty, cause its a fixed value
              });
              attrs.$observe("ngSrc", function () {
                  element.removeClass("ng-show");
                  element.addClass("ng-hide");
              });
          }
      }
  });
  </code></pre>
  
  <p>But it doesn't seem to animate. What should be the correct solution to animate the <code>ng-src</code> change?</p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/wszk0tr1/3/" rel="nofollow noreferrer">http://jsfiddle.net/wszk0tr1/3/</a></p>