01-template.html

<div class="app-root" ng-controller="rootController">

  <div class="carousel">
    <!--
      I have a UI Bootstrap carousel with some slides in it. Each slide
      needs to be both clickable and swipeable, with a mouse (this problem
      is not an issue on mobile).
      
      The problem I'm having is that when you swipe with a mouse click,
      letting the mouse up at the end of the swipe will trigger the click
      (which opens a modal). I need the click to only be called if no swipe
      happens. That is what the swipe handler directive is there for, but I
      need to trigger the parent scope's click handler from the directive's
      link function.

      How do I do that?
    -->
    <div class="slide"
         swipe-handler-directive
         click-handler="clickHandler(slide, $index)"
         ng-repeat="slide in slides track by $index"
    ></div>

  </div><!-- .carousel -->
</div><!-- .app-root -->

02-controller.js

angular.module('myApp')
  .controller('rootController', function($scope) {
    $scope.clickHandler = function(slide, $index) {
      // do something with 'item' and $index
    };
  })
;

03-swipe-handler-directive.js

angular.module('myApp')
  .directive('swipe-handler-directive', function() {
    return {
      restrict: "A",
      scope: {
        clickHandler: '&'
      },
      link: function($scope, $element, $attrs) {
        $element.on('click', function() {
          $scope.clickHandler(slide, $index);
        }
      }
    }
  })
;