iamdash iamdash - 4 months ago 52
HTTP Question

AngularJS calls HTTP multiple times in controller

I am developing a page with Angular, and have an init() method in my controller. The code is as follows:

var filtersController = ['$scope', '$http', function ($scope, $http) {
$scope.init = function () {
method: 'GET',
url: '/json-tags-test',
cache: true
}).success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.

It is just a call to a simple JSON file.

My HTML is as follows:

<div class="container main-frame" ng-app="projectsApp" ng-controller="filtersController" ng-init="init()">

For some reason, this get call gets call twice every time I load the page. Is this standard behaviour?

Many thanks,


enter image description here


This problem may also be caused by having an ng-app with routing to your controller and an ng-controller reference in your page. For example, if your app looks like:

<html lang="en" ng-app="myApp">
<div ng-controller="myController">

Javascript defining the app:

angular.module('myApp',[]) {
$routeProvider.when('/path', {templateUrl: '...', controller: myController);

In the case above, with the defined routing to myController, the controller will be instantiated twice and you'll see two calls as described.


Above code describe what is problem but what is proper solution is missing so I updated answer as per @Intrepid comment.

Need to remove ng-controller="myController" from your html template if you already defined in route.