Why is the alert displayed two times on button click?

Question

Could you please tell me why alerts display two times on button click?

here is my plunker http://plnkr.co/edit/vtmYAG2d1gmnPjnxovJw?p=preview

/*global define, console */

define(['app'], function(app){
   'use strict';

    app.controller('LoginCtrl', ['$scope', function($scope) {
        $scope.login = function () {
          alert("Login is clicked")
        };

    }]);

});

Answer 1

If you use a newer version of Ionic it works: http://plnkr.co/edit/K2BLrUyOEeoDxHc9LyTl?p=preview

I used http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js

your example uses http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js

requirejs.config({
paths: {
    ionic:'http://code.ionicframework.com/1.0.0/js/ionic.bundle.min',
},
shim: {
    ionic : {exports : 'ionic'}
}, priority: [
    'ionic'
],

deps: [
    'bootstrap'
]

});

Answer 2

Problem fixed you have used obsolete minified version of ionic and requirejs non-minified.

Just change your ionic version to -- http://code.ionicframework.com/1.0.0/js/ionic.bundle.js

and requireJs to RequireJS 2.1.17

it's working fine ...change version in your fiddle

Answer 3

The digest cycle runs at least two times by angularjs. So, probably the reason for the alert is appearing two times is digest cycle.

But others said to change version and you would get alert calling only once. But if you don't want to change the version, there's a workaround to this:

$scope.login = function () {
   alert("Login is clicked");
   $scope.login = function(){
     return false;
   }
 };

working demo

This method allows you to call function only once. It might be helpful for others who want to stop digest cycle.