changeImg.js

  .directive('changeImg', [function () {

    return {
      restrict:'A',
      scope:{
        imgA: '=',
        imgB: '='
      },
      link: function (scope, element) {
        element.mouseover(function(event){
          event.target.src = scope.imgB;
        });
        element.mouseleave(function(event){
          event.target.src = scope.imgA;
        });
      }
    }

  }]);

img.html

    <a change-img img-a="'https://res.cloudinary.com/berlin/image/upload/c_fill,h_500,w_600/00bc2106-8d45-40e4-9a46-6d16a4812b14.jpg'" img-b="'https://res.cloudinary.com/berlin/image/upload/c_fill,h_500,w_600/56ab31cd-39c3-423c-a441-43193f417efd.jpg'" href="#">
      <img src="https://res.cloudinary.com/berlin/image/upload/c_fill,h_500,w_600/00bc2106-8d45-40e4-9a46-6d16a4812b14.jpg">
    </a>

variation.html

    $scope.customImages = {
      imgA : 'https://res.cloudinary.com/berlin/image/upload/c_fill,h_500,w_600/00bc2106-8d45-40e4-9a46-6d16a4812b14.jpg',
      imgB : 'https://res.cloudinary.com/berlin/image/upload/c_fill,h_500,w_600/56ab31cd-39c3-423c-a441-43193f417efd.jpg'
    }


    <a change-img data-img-a="customImages.imgA" data-img-b="customImages.imgB" href="#">
      <img ng-src="{{customImages.imgA}}">
    </a>