function called twice inside angularjs controller

Question

I am new to angular js and currently stuck with very wired kind of a bug. function in a controllers runs twice when its called by view loaded against a route.

http://jsfiddle.net/4gwG3/5/

you will see alert twice!!

my view is simple

and my app code is following

var IB = angular.module('IB', []); 
//channel controller
IB.controller('channelsController', function ($scope, $routeParams) {
 $scope.greet = function () {
 alert('hi');
 };
});
IB.config(function ($routeProvider) {
 $routeProvider
 .when('/channels', {
 controller: 'channelsController',
 template: '{{greet()}}'
 })
 .otherwise({ redirectTo: '/channels' });
});

• charlietfl: need to read up on digest cycles... they can be called numerous times. Would help to explain what you want to acheive

Answer 1

First check that you're not initializing your Angular app twice (by having it initialized automatically with ng-app).

One time I had 2 html pages with ng-app (one for login.html and another for main.html) and this was a problem I realized later.

Second and for me the most important, check if you have attached your controller to multiple elements. This is a common case if you are using routing.

In my case I was navigating to DashboardController like so:

app.config(function($routeProvider){
 $routeProvider
 .when('/', {
 controller: 'DashboardController',
 templateUrl: 'pages/dashboard.html'
 })
});

But I also had this in dashboard.html:

<section class="content" ng-controller="DashboardController">

Which was instructing AngularJS to digest my controller twice.

To solve it you have two ways:

removing ng-controller from your html file like this:

<section class="content">

or removing controller from routing (that is normally situated in app.js):

app.config(function($routeProvider){
$routeProvider
 .when('/', {
 templateUrl: 'pages/dashboard.html'
 })
 });

Answer 2

I think by creating an interpolation {{greet()}}, you create a watch on function greet. This function can get call as many time as digest cycle runs, so it is not a question about it running 1 or 2 times. So you should not depend upon the times the function is called.

• Najam Awan: so can you please let me know how can a view call a function inside its controller. and when can controller call a function once view is loaded?
• Chandermani: You are already calling a function of controller inside view, and it is perfectly fine to do this. The only thing I am saying is you cannot depend upon how may times that function gets invoked. I did not understand your second part. I highly recommend you see the developer guide docs.angularjs.org/guide/concepts
• Najam Awan: I want view to request a function that is defined in controller just once? second way would be controller to know that view is loaded so he can call some functions that make expensive calls like loading a web player with live stream.
• Vijay Pande: @njam you need not wait for wait to load for view. You should move expensive call to the service method and use Promise api (docs.angularjs.org/api/ng.$q) to wait for service response.

Answer 3

I dont know what you are trying to achieve here. There are two alerts 1. When the controller is called. 2. When the template is get evaluated.

template is to provide the view part, however, in this case template is just evaluating function which is not creating any view.

Answer 4

I had the same problem, so I did:

$scope.init=function()
{
 if ($rootScope.shopInit==true) return;
 $rootScope.shopInit=true;
 ...
}
$scope.init();

Like if it were a singleton ! (I had many ajax calls each time I display, it was boring)

• Victor: nice workaround, it really hides the problem instaed of resolving... but better than nothihg... don't now why you get downvoted....