Button flickering on mouseover with ng-clip and ng-show/ng-hide

I'm seeing weird flickering when mousing over the ng-clip enhanced button. I've got the ng-clip enhanced button being shown/hid when the enclosing div is moused over. As the user moves the mouse over the button, it flickers. I'm assuming it's something to do with event handling between Zeroclipboard and the Angular code?

Here is a Plunker page displaying the issue: http://plnkr.co/4gFy9U

The code from Plunker:

<!doctype html>
<html>
<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
  <script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
</head>
<body>

<div ng-app="myapp">
  <div class="container" ng-controller="myctrl" ng-mouseover="isHovering = true" ng-mouseout="isHovering = false">

    <div class="page-header">
      <h1>ngClip <small>example</small></h1>
    </div>

    <form>
      <div style="background:red;" class="form-group">
        <label >Copy #1</label>
        <input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
        <button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
      </div>

      <br/><br/><br/>

      <textarea class="form-control" rows="3" placeholder="paste here"></textarea>
    </form>
  </div>
</div>

<script>
  var myapp = angular.module('myapp', ["ngClipboard"]);

  myapp.config(['ngClipProvider', function(ngClipProvider) {
    ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
    ngClipProvider.setConfig({
      bubbleEvents: false
    })
  }]);

  myapp.controller('myctrl', function ($scope) {
    $scope.fallback = function(copy) {
      window.prompt('Press cmd+c to copy the text below.', copy);
    };

    $scope.showMessage = function() {
      console.log("clip-click works!");
    };
  });
</script>

</body  >
</html>

Solution

I was also having this issue. I fixed by using ng-mouseenter on an outer div instead of using ng-mouseover and ng-mouseleave on an inner div instead of ng-mouseout. No flicker!

So:

<div ng-app="myapp" ng-mouseenter="isHovering = true">
  <div class="container" ng-controller="myctrl" ng-mouseleave="isHovering = false">

    <div class="page-header">
      <h1>ngClip <small>example</small></h1>
    </div>

    <form>
      <div style="background:red;" class="form-group">
        <label >Copy #1</label>
        <input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
        <button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
      </div>

      <br/><br/><br/>

      <textarea class="form-control" rows="3" placeholder="paste here"></textarea>
    </form>
  </div>
</div>