$timeout is calling services twice



I am using Ionic 1 (which appears to be using AngularJS 1.5.3). I was facing a strange issue while testing my app using Ripple emulator on Google Chrome, my service method was being called twice. After debugging for sometime, I was able to narrow down it to $timeout.

In my controller, I am using a $timeout method to invoke a method defined in controller like below (this is default tab example of Angular, in which I can replicate the same issue, so I am sharing code of that):


angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $timeout, PrintService) {
    $scope.myName = "devilzk";
    $scope.counter = 0;
    }, 2000);


    angular.module('starter.services', [])

    .service('PrintService', function(){
        this.printMessage = function(message){
          console.log("Printing via Service:: " + message);

In templates > tab-dash.html file, I specified following HTML snippet:

<h2>Welcome to Ionic</h2>
<h1>{{ myName }}</h1>
<h3>{{ counter }}</h3>

Now when I run this code in Ripple, counter value is updated only one time as expected after 2 seconds, and I see it being displayed as 1.

However, in console log, my service message is being displayed twice as well console.log(). I tried to replicate same in simple AngularJS app, but it worked fine there.

Lastly, in several attempts, I found that if I don’t use ng-app directive on html tab in index.html, but instead use AngularJS’s bootstrap method to create my app like:

document.addEventListener('deviceReady', function(){
      angular.bootstrap(document, ['starter']);
}, false);

Then $timeout was triggered only once. So little confused, because most of ionic examples are not using angular’s bootstraping approach. Secondly, with ng-app approach, why counter value was incremented only once, but console log appeared twice (i.e. service method was called twice).