title: Angular Bootstrap Carousel pauses when hovering over even with no-pause set
body: <p>I am using bootstraps carousel in my project. I have set up my controller like this:</p>
  
  <pre><code>.controller('HomeController', function () {
      var self = this;
  
      self.interval = 2000;
      self.designer = [{
          image: '/assets/images/carousel/designer/slide-1.jpg'
      }, {
          image: '/assets/images/carousel/designer/slide-2.jpg'
      }, {
          image: '/assets/images/carousel/designer/slide-3.jpg'
      }, {
          image: '/assets/images/carousel/designer/slide-4.jpg'
      }, {
          image: '/assets/images/carousel/designer/slide-5.jpg'
      }, {
          image: '/assets/images/carousel/designer/slide-6.jpg'
      }];
  });
  </code></pre>
  
  <p>and my view looks like this:</p>
  
  <pre><code>&lt;div carousel interval="controller.interval" no-pause controls="false"&gt;
      &lt;div slide ng-repeat="slide in controller.designer" active="slide.active"&gt;
          &lt;img ng-src="{{ slide.image }}" style="margin:auto;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For this particular carousel I don't want to have the controls.
  There is no attribute to remove controls by default (I checked the JS file), so at first I just added some CSS to handle this for me:</p>
  
  <pre><code>.no-controls .carousel-indicators, 
  .no-controls .carousel-control {
      display: none; 
  }
  </code></pre>
  
  <p>Which seemed to work fine, but there is an issue when hovering over the controls. It pauses the carousel which I do not want. So I decided to create a directive that <strong>requires</strong> the carousel directive like this:</p>
  
  <pre><code>.directive('controls', function () {
      return {
          restrict: 'A',
          require: 'carousel',
          link: function (scope, element, attr) {
  
              // Assign our variables
              var showControls = attr.controls ? false : true;
  
              // If we do not want to show the controls
              if (!showControls) {
  
                  // Get the element children
                  var children = element.children();
  
                  // Loop through our element children
                  for (var i = 0; i &lt; children.length; i++) {
  
                      // Get our current child
                      var child = angular.element(children[i]);
  
                      // If we our class exists
                      if (child.hasClass('carousel-indicators') || child.hasClass('carousel-control')) {
  
                          // Remove the child
                          child.remove();
                      }
                  }
              }
          }
      }
  });
  </code></pre>
  
  <p>What this does is checks to see if we have set our directive up like this: <strong>controls="false"</strong> and if we have then it loops through the carousels children removing any control that is found.</p>
  
  <p>The problem is that when I hover over the carousel it still pauses. Does anyone know how to stop it pausing?</p>