AngularJS ng-click fires twice

Question

I am using ng-click and it fires twice when I apply it to SPAN tag.

HTML

<div ng-app="regApp" ng-controller="RegistrationCtrl" data-ng-init="GetEventDetail()" ng-show="data.EventName">      <h2>Registration for {{data.EventName}}</h2>     <span class="btn" id="btnSave" ng-click="PostRegistration()">Save </span>  </div> 

CONTROLLER

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

It should only fire once. How I can find why this is happening and how to fix it?

Answer 1

The code you've provided does not fire the event twice:

http://jsfiddle.net/kNL6E/ (click Save)

Perhaps you included Angular twice? If you do that, you'll get two alerts, demonstrated here:

http://jsfiddle.net/kNL6E/1/

Answer 2

I had a similar problem, but could not find where I included Angular twice in my files.

I was using an ajax calls to load specific form layouts, so I need to use $compile to activate Angular on the inserted DOM. However, I was using $compile on my directive $element which has a controller attached. Turns out this "includes" the controller twice, causing two triggers with ng-click or ng-submit.

I fixed this by using $compile directly on the inserted DOM instead of my directive $element.