Why controller called twice, when state changes? - angularjs

Question

This is my app.js
angular.module('app', ['ui.router', 'satellizer'])
.constant('API_URL', 'http://localhost/angular/public/api/v1/')
.config(function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.loginUrl = 'angular/public/api/authenticate';
$urlRouterProvider.otherwise('/auth');
$stateProvider
.state('auth', {
url: '/auth',
templateUrl: 'app/view/login.html',
controller: 'AuthController as auth'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'app/view/dashboard.tmpl.html',
params: {
model: ''
}
})
.state('dashboard.employees', {
templateUrl: 'app/view/employee.tmpl.html',
controller: 'employeesController',
}).state('dashboard.test', {
templateUrl: 'app/view/edit.tmpl.html',
controller: 'employeesController',
})
});
When I click ui-sref="dashboard.employees" controller calls twice.
calls twice
This is my controller which I want to use for all views. I developed cms on laravel and angular. I can't create a new controller for every table entity.
angular.module('app')
.controller('employeesController', function($scope, $http, API_URL,$stateParams) {
//retrieve employees listing from API
$scope.employees = '';
$http.get(API_URL + $stateParams.model)
.success(function(response) {
$scope.employees = response;
});
//show modal form
$scope.toggle = function(modalstate, id) {
$scope.modalstate = modalstate;
switch (modalstate) {
case 'add':
$scope.form_title = "Add New Employee";
break;
case 'edit':
$scope.form_title = "Employee Detail";
$scope.id = id;
$http.get(API_URL + $stateParams.model+'/' + id)
.success(function(response) {
console.log(response);
$scope.employee = response;
});
break;
default:
break;
}
$('#myModal').modal('show');
}
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "employees";
//append employee id to the URL if the form is in edit mode
if (modalstate === 'edit') {
url += "/" + id;
}
console.log('saved');
$http({
method: 'POST',
url: url,
data: $.param($scope.employee),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(response) {
var index = _.findIndex($scope.employees, function(b) {
return b.id == $scope.employee.id;
});
console.log(index);
if (index != -1) {
$scope.employees[index] = $scope.employee;
} else {
console.log($scope.employee);
$scope.employee.id = response;
$scope.employees.push($scope.employee);
console.log($scope.employees);
}
$('#myModal').modal('toggle');
}).error(function(response) {
console.log(response);
alert('This is embarassing. An error has occured. Please check the log for details');
});
}
//delete record
$scope.confirmDelete = function(employee) {
var isConfirmDelete = confirm('Are you sure you want this record?');
if (isConfirmDelete) {
$http({
method: 'DELETE',
url: API_URL + 'employees/' + employee.id
}).
success(function(data) {
_.remove($scope.employees, function(n) {
return n.id == employee.id;
});
console.log(data);
}).
error(function(data) {
console.log(data);
alert('Unable to delete');
});
} else {
return false;
}
}
});
Where is my mistake? How can I fix that?

Answer 1

kindly check, if you are called the controller in your employee.tmpl.html page, like ng-controller="employeesController"
Please remove it, if you call the ng-controller in your html