$http is getting called multiple times in AngularJS - angularjs

Question

In my project the $http call is getting called more than once every time. Check the code below.
router.js
angular.module('adminsuite',['ngFileUpload','ui.router','ngCookies','angular-clipboard','ngAnimate', 'ngSanitize', 'ui.bootstrap','ngMessages']).constant("__env",env).config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
//$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/',
views:{
header:{
templateUrl: '',
controller: ''
},
pageContent:{
templateUrl: 'Login/login3.html',
controller: 'loginController'
},
footer:{
templateUrl: 'common/footer3.html',
controller: 'footerController'
}
}
})
// HOME STATES AND NESTED VIEWS ========================================
.state('dashboard', {
url: '/dashboard',
views:{
header:{
templateUrl: 'common/header.html',
controller: 'headerController'
},
pageContent:{
templateUrl: 'dashboard/dashboard.html',
controller: 'dashboardController'
},
footer:{
templateUrl: 'common/innerFooter.html',
controller: 'footerController'
}
}
})
//SURVEY STATES
.state('survey', {
url: '/survey',
views:{
header:{
templateUrl: 'common/headerTool.html',
controller: 'headerController'
},
pageContent:{
templateUrl: 'survey/survey.html',
controller: 'surveyController'
},
footer:{
templateUrl: 'common/innerFooter.html',
controller: ''
}
}
}).state('survey.surveyList', {
url: '/:id',
templateUrl: 'survey/surveyList.html',
controller: ''
}).state('survey.surveyList.details', {
url: '',
templateUrl: 'survey/survey-details/summary.html',
controller: ''
}).state('survey.surveyList.questionare', {
url: '',
templateUrl: 'survey/questionare/questionare.html',
controller: 'questionareController'
}).state('survey.surveyList.sampleManagement', {
url: '',
templateUrl: 'survey/sample-management/sample-management.html',
controller: ''
}).state('survey.surveyList.quotaManagement', {
url: '',
templateUrl: 'survey/quota-management/quota-management.html',
controller: 'quotaController'
}).state('survey.surveyList.scheduling', {
url: '',
templateUrl: 'survey/scheduling/scheduling.html',
controller: ''
}).state('survey.surveyList.notification', {
url: '',
templateUrl: 'survey/notification/notification.html',
controller: ''
}).state('survey.surveyList.reports', {
url: '',
templateUrl: 'survey/reports/reports.html',
controller: ''
}).state('survey.surveyList.location', {
url: '',
templateUrl: 'survey/location/location.html',
controller: ''
});
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
})
loginAuthentication.js
UserService.GetByUsername(requestData)
.then(function (user) {
console.log(user);
if (user.SessionID) {
sessionID = user.SessionID;
userDetails = user.UserProfile;
response = { success: true};
} else {
response = { success: false, message: 'Username or password is incorrect' };
}
callback(response);
});
UserService.js
function GetByUsername(user) {
//console.log(__env.apiUrl);
return $http.post(__env.apiUrl+'/UserAuthentication/login', user, {headers: { 'Content-Type': 'application/json'}}).then(handleSuccess, handleError('Error getting user by username'));
}
When I call this function in the backend it is called more than once. And the same thing is happening for the other APIs.
I removed all the duplicate controllers, but the issue persists.
One particular issue what am getting is sending the token id in the header section of $http call, but this call in back end happening two times and some times more than that. In first time this header token shows empty and second times or more than that time it is giving the result. please check the below code.
api call
$http.get(__env.apiUrl+'/UserSurvey/GetAllSurveys', {
headers: { 'Content-Type': 'application/json','SessionID':$rootScope.token}
})
.then(function(response){
console.log(response);
return response.data;
}, function(error){
console.log("error");
console.log(error);
return error;
});

Answer 1

You might be having a digest cycle issue.
When my AJAX module is located in plain Javascript my data renders on the first server query. However, when I place my AJAX module in an AngularJS module I must query the server twice before my data renders. Note the query is invoked from the UI.
After poking around I realized the data had indeed arrived on the first query and was assigned to all designated objects and variables but only within the scope of the AngularJS code. Of course, the data had arrived asynchronously and the UI had already gone through a digest cycle and had no reason to go again because nothing in the UI had changed. When there’s a change in the UI Angular updates everything but does nothing when the change (arriving data) comes from the server.
Subsequently, the second identical query would force a digest cycle and update all the bindings with the data that was already sitting there from the first query.
Thus the objective is to force a digest cycle from Javascript to update your UI bindings. I now force a digest cycle at the end of my callback function.
To force a digest cycle place the Angular method $scope.$apply([exp]) after your data variable assignments are complete. I found helpful details in the Angular docs at: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply and also a great explanation with working examples at: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html and an important detail about using the “controller as” syntax when forcing a digest cycle at: How to call $scope.$apply() using "controller as" syntax and hopefully this fixes the problem of the double HTTP call.