controller.js

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

swipe-handler-directive.js

angular.module('myApp')
  .directive('swipe-handler-directive', function() {
    return {
      restrict: "A",
      scope: {},
      link: function($scope, $element, $attrs) {
        // do all the mousedown/mousemove event handler stuff
        // here, and call the parent scope's click handler
        // from here, but only if a swipe hasn't occurred
      }
    }
  })
;

template.html

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

  <div class="carousel">
    <!--
      Each slide needs to be both clickable and swipeable, with a mouse
      (this problem does not happen 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 there 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
         ng-repeat="slide in slides track by $index"
    ></div>

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