If you want to customize the handling of click events, you have the option to create your own solution. By referring to resources like this Stack Overflow thread, you can see how to modify angular's click behavior.

<div sglclick="singleClick()" ng-dblClick="doubleClick()" style="height:200px;width:200px;background-color:black">


app.controller('AppCntrl', ['$scope', function ($scope) {
    $scope.singleClick = function() {
      alert('Single Click');
    }
    $scope.doubleClick = function() {
      alert('Double Click');
    }
}])


app.directive('sglclick', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
          var fn = $parse(attr['sglclick']);
          var delay = 300, clicks = 0, timer = null;
          element.on('click', function (event) {
            clicks++;  //count clicks
            if(clicks === 1) {
              timer = setTimeout(function() {
                scope.$apply(function () {
                    fn(scope, { $event: event });
                }); 
                clicks = 0;             //after action performed, reset counter
              }, delay);
              } else {
                clearTimeout(timer);    //prevent single-click action
                clicks = 0;             //after action performed, reset counter
              }
          });
        }
    };
}])

You can implement and test this functionality using the example below.

Plunker Demo

Stumbled upon this and wanted to share a different approach. While similar to the original post, there are two key differences.

1) I avoid nested function declarations.

2) I make use of $timeout. Even without a delay, I find it helpful when initiating promises for other tasks. It ensures that any scope changes are applied when the digest cycle runs through.

Assuming

<img src="myImage.jpg" ng-click="singleClick()" ng-dblclick="doubleClick()">

In your controller, the singleClick function can be written as follows:

$scope.singleClick = function () {
    if ($scope.clicked) {
        $scope.cancelClick = true;
        return;
    }

    $scope.clicked = true;

    $timeout(function () {
        if ($scope.cancelClick) {
            $scope.cancelClick = false;
            $scope.clicked = false;
            return;
        }

        //perform action on single click here

        //clean up
        $scope.cancelClick = false;
        $scope.clicked = false;
    }, 500);
};

And the doubleClick function remains unchanged:

$scope.doubleClick = function () {

    $timeout(function () {

        //perform action on double click here

    });
};

Hopefully, this provides some assistance to someone out there...

While exploring ways to manage double clicks and single clicks simultaneously, I came across a solution that involves cancelling the original click event if a second click occurs within a specified delay. This approach allows for the execution of a double-click action when two consecutive clicks are detected, while also ensuring that the default single click action is triggered after the delay period has elapsed.

For instance:

<div ng-click="performSingleClick()"><span double-click="performDoubleClick()">Double Click Here</span></div>

Implementation:

.directive('doubleClickHandler', function($timeout, _) {

  var CLICK_DELAY = 300;
  var $ = angular.element;

  return {
    priority: 1,
    restrict: 'A',
    link: function(scope, element, attrs) {
      var clickCount = 0;
      var clickTimeout;

      function handleDoubleClick(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $timeout.cancel(clickTimeout);
        clickCount = 0;
        scope.$apply(function() { scope.$eval(attrs.doubleClickHandler); });
      }

      function handleSingleClick(clonedEvent) {
        clickCount = 0;
        if (attrs.ngClick) scope.$apply(function() { scope.$eval(attrs.ngClick); });
        if (clonedEvent) element.trigger(clonedEvent);
      }

      function delaySingleClick(e) {
        var clonedEvent = $.Event('click', e);
        clonedEvent._delayedSingleClick = true;
        e.preventDefault();
        e.stopImmediatePropagation();
        clickTimeout = $timeout(handleSingleClick.bind(null, clonedEvent), CLICK_DELAY);
      }

      element.bind('click', function(e) {
        if (e._delayedSingleClick) return;
        if (clickCount++) handleDoubleClick(e);
        else delaySingleClick(e);
      });

    }
  }

})

Combining the pieces of the solutions together:

• utilizing @GregGrater's approach for simplicity
• implementing a directive, following @Rob's (the accepted best answer in this discussion)
• addressing the issue in @Rob's solution by substituting the built-in ngClick directive with guidance from @EricChen's response

Here is the Plunker showcasing the core concept (similar to the code snippet provided in this answer; refer below).

Note: ideally, if there is no ng-dblclick specified for the element, it shouldn't hinder the single click (demonstrated in a forked Plunker implementing this concept)

(function(angular) {
  'use strict';
var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', ['$scope', function($scope) {
  $scope.click = false;
  $scope.singleClick = function() {
    $scope.click = 'single';
  };
  $scope.doubleClick = function() {
    $scope.click = 'double';
 };
}]);

// removing the built-in ng-Click to resolve the issue mentioned in https://stackoverflow.com/a/20445344/4352306
myApp.config(function($provide) { // Source: https://stackoverflow.com/a/23209542/4352306
  $provide.decorator('ngClickDirective', ['$delegate', function ($delegate) {
   //$delegate represents an array of all ng-click directives; in this scenario, 
   // the first directive is the Angular built-in ng-click, which we remove.
   $delegate.shift();
   return $delegate;
   }]);
});

// adding a custom single click directive: ensuring ngClick triggers only if not a double click
myApp.directive('ngClick', ['$parse', '$timeout', dirSingleClickExclusive]); 

function dirSingleClickExclusive($parse, $timeout) {
  return {
    restrict: 'A',
    replace : false,
    priority: 99, // after all built-in directives are compiled
    link: link
  }

  function link ($scope, element, attrs) {
    const delay = 400;
    var clicked = false, cancelClick = false;
    var user_function = $parse(attrs['ngClick']); //(scope);

    element.on('click', function (e) {
      // Adapted from: https://stackoverflow.com/a/29073481/4352306
      if (clicked) cancelClick = true; // signifies a non-single click
      clicked = true;
      
      if (!cancelClick) { // prevent a second timeout
        $timeout(function () { // for the time window between clicks (delay)
          if (cancelClick) {
            clicked = false; cancelClick = false;
            return;
          }
          $scope.$apply(function () {
            user_function($scope, {$event : e});
          });
  
          // resetting click status
          clicked = false; cancelClick = false;
        }, delay);
      }
    });
  }
}
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8>";
  <title>Example - custom single click</title>
  
  <script src="//code.angularjs.org/snapshot/angular.min.js>";
  <script src="app.js>
  
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
   <button ng-click="singleClick()" ng-dblclick="doubleClick()">Click me!</button>
   <p ng-if="click">This was a {{click}} click.</p>
  </div>
</body>
</html>

If you execute singleClick on the doubleClick without any errors, it will still function properly.

<section 
    onclick="let context = angular.element(this).context(); context.singleClick();"
    ng-click="null" 
    ng-dblclick="doubleClick()"
></section>