Custom Plunk

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Dog';
  $scope.dog = function()
  {
    $scope.name = 'U Dog';
  };
});

app.directive("fadeit", function () {
  return {
		restrict:"A",
		link:function (scope, iElement, iAttrs, controller) {
			var opacityEnter = iAttrs.opacityEnter ? Number(iAttrs.opacityEnter) : 1;
			var opacityLeave = iAttrs.opacityLeave ? Number(iAttrs.opacityLeave) : 0.8;
			var duration = iAttrs.duration ? Number(iAttrs.duration) : 250;
			$(iElement).fadeTo(0, opacityLeave);
			iElement.bind("mouseenter", function () {
				console.log('mouseenter');
				$(iElement).fadeTo(duration, opacityEnter);
			});
			iElement.bind("mouseleave", function () {
				console.log('mouseleave');
				$(iElement).fadeTo(duration, opacityLeave);
			});

		}
	};
});

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <h1 ng-click="dog()">Hello {{name}}</h1>
    <img fadeit src="http://placedog.com/200/200" />
    <img fadeit duration="1001" src="http://placedog.com/200/200?"/>
    <img fadeit duration="100" opacity-leave="0.1" src="http://placedog.com/200/200?1"/>
  </body>

</html>

/* CSS goes here */