title: mouseover and mouseleave text color changing not working within directive link
body: <p>I have created a directive with transclude feature, the directive is working fine but the issue is that, in the child transcluded template I am having a text say "Some-Name", when mouse is hovered the color of the text should be white and when mouse leaves it should be the color which has been assigned actually. I need to implement this without external css file</p>
  
  <p>I have tried with the following code, but it seems not working</p>
  
  <pre><code>elem.find("a").bind("mouseover", function()
  {
      scope.actualColor = angular.copy(scope.textColor.color);
      scope.textColor.color = "#000000";
  });
  elem.find("a").bind("mouseleave", function()
  {
      scope.textColor.color = scope.actualColor;
  });
  </code></pre>
  
  <p><strong><a href="http://plnkr.co/edit/fKbHKH4bnjtRcZy4A0Zg?p=preview" rel="nofollow">PLUNKER</a></strong></p>
  
  <p>Can anyone please tell me some solutions for this</p>