I ran into a similar issue where I couldn't pinpoint the source of Angular being included twice in my code.

My situation involved loading form layouts through ajax calls, requiring me to utilize $compile to activate Angular within the dynamically inserted DOM. The problem arose when I used $compile on my directive's $element which already had a controller attached. This resulted in the controller being included twice, leading to unexpected behaviors with ng-click and ng-submit.

To resolve this, I made sure to apply $compile directly to the inserted DOM itself instead of using it on my directive's $element.

Encountered an issue with:

<a ng-click="fn()"></a>

The function 'fn' was triggered twice.

Resolved the problem by switching to a button:

<button ng-click="fn()"></button>

It may seem far-fetched, but I encountered a situation where the ng-click function was triggered twice due to BrowserSync running. This caused my inputs to be mirrored in another window, resulting in double clicks. The issue was resolved by disabling “ghostMode”:

To resolve the issue, I decided to eliminate my ngsubmit handler since it was unnecessary for my requirements. Instead, I am now monitoring change events and utilizing SignalR to provide real-time updates on the screen.

Furthermore, I discovered that while working within a form, the AngularJS documentation for ngSubmit warns:

Caution: It is important to avoid "double-submission" by using both the ngClick and ngSubmit handlers simultaneously. Refer to the form directive documentation for an in-depth explanation of the circumstances under which ngSubmit may be activated.

If someone else is experiencing a similar issue, this may be the solution:

<a type="submit" ng-click="login()">submit login</a>

The attributes type="submit" and ng-click="login()" were both activating the login() method in my controller.

To resolve this, simply use either the type=submit attribute or the ng-click directive.

If you're still having trouble, be sure to check that AngularJS profiling is turned off in Batarang (assuming you have it installed).

I found that this was causing ng-click to trigger twice in my case.

Elements are nested inside each other, which can lead to events being triggered multiple times.

To solve this issue, I employed a straightforward CSS technique:

.off{
   pointer-events:none;
}

This class is then applied to an element that is linked to a click event.

Ensure that if you have a ng-click within a form container and utilizing ng-submit, make sure to include type="button" on all your buttons with ng-click.

By mistake, I ended up calling $compile multiple times for the dynamically added elements in the cycle. When I realized this and changed it to compile just once, the issue was resolved.

Encountered a similar issue but discovered that the problem was caused by using an outdated version of AngularJS. After updating to the latest version 1.4.5, everything started working smoothly.

Updated AngularJS version (1.4.5)

var app = angular.module('regApp', []);

app.controller('RegistrationCtrl', ['$scope','$http',function($scope,$http ) {
  $scope.PostRegistration = function() {
    alert('click '); // <--- fires twice
    /// some code here -- 
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="regApp" ng-controller="RegistrationCtrl">
  <h2 >Registration for {{data.EventName}}</h2>
  <span ng-click="PostRegistration()" class="btn" id="btnSave">Save </span>

</div>

After switching from <button ng-click='clickHandler()'> to <a ng-click='clickHandler()'>, the event now triggers just once.

Dealing with the same issue arose for me while dynamically injecting partial views into my Single Page Application (SPA). My solution involved saving the content of a specific div in a local variable:

var storedHtml = $("#mainContent").html();

Following this, I cleared the div and replaced its content with the saved HTML:

$("#mainContent").empty();
$("#mainContent").append(storedHtml);

From here, any additional HTML obtained from an AJAX request or dynamically generated can be added. Remember to recompile the HTML to ensure it is properly bound to Angular:

var newEntity = "<div><a href='#' ng-click='Select(" + entityID + ")'>&nbsp;" + entityName + "</a><div>"
$("#entitiesContainer").append(newEntity);

var entitiesContainer = angular.element(document.getElementById("entitiesContainer"));

$compile(entitiesContainer)($scope);

After some trial and error, I found a solution to my issue:

<li data-shape="amethyst" ng-click="toggleGem('amethyst')">
    <label></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

It turns out that the click event was triggering twice. By moving the ng-click attribute to the label element, the problem was resolved.

<li data-shape="amethyst">
    <label ng-click="toggleGem('amethyst')"></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

This issue could arise due to the absence of ngTouch in Angular.

Even if ngTouch is present, a potential problem with ngTouch and ngClick prior to Angular 1.5.0 might still manifest. This is because ngClick gets activated by both pointerup and mouseUp events in Chrome for Desktop when using device toolbar or mobile device.

I encountered a similar issue before.

<button style="width: 100%;" class="btn btn-danger" ng-click="'{{vm.delete()}}'">

The way to call ng-click was incorrect in the previous code snippet, but surprisingly it still functioned without any errors.

<button style="width: 100%;" class="btn btn-danger" ng-click="vm.delete()">

This is the correct syntax and ensures that the function is called only once.

I'm not sure what caused this issue, but I found a solution by adding event.stopPropagation(); inside my JavaScript function.

Here's the HTML code:

<button class="button" ng-click="save($event)">Save</button>

And here's the corresponding JavaScript code:

function save(event) {
    event.stopPropagation();
}

My approach to solving this issue is shown in the code below

HTML :

<div>
    <ui>
        <li>
            <button class="Button" ng-disabled="self.desableSubmitButton" ng- 
            click="self.SubmitClick($event)">Submit</button>
        </li>
    </ui> 
</div>

Angular 1.0 Controller :

_self.SubmitClick = function(event){   
     _self.desableSubmitButton = true; //disable submit button
     event.preventDefault();
     event.stopPropagation();

     setTimeout(funtion() {
       _self.desableSubmitButton = false; //enable submit button after timeout
           if(_self.$scope.$$phase != '$apply' || _self.$scope.$$phase != '$digest'){
             _self.$scope.$digest();
             }
      }, 1000);//other Code logic
}

My scenario involved utilizing the ng-click event with a custom angular checkbox component. I discovered that simply providing a method binding for the custom component resolved the issue.

Initially:

<mono-checkbox-ng ng-click="vm.onSelectAllClicked()">

Updated:

<mono-checkbox-ng on-changed="vm.onSelectAllClicked()">