Angularjs: priority executing controllers - angularjs

Question

I have some controllers and would like to share some datas from each others.
so I built a factory to pass those data ("anagType") from "AnagTypeController" to "CourseCatController", but the second controllers is parsed before the first one.
This is the HTML:
<div id="workArea" class="row">
<div class="col-md-6">
<div class="panel panel-info" ng-controller="Controller1">
...
</div>
</div>
<div class="col-md-6">
<div class="panel panel-warning" ng-controller="AnagTypeController">
...
</div>
<div class="panel panel-warning" ng-controller="Controller3">
...
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-4">
<div class="panel panel-danger" ng-controller="CourseCatController">
...
</div>
</div>
<div class="col-md-4">
...
</div>
<div class="col-.md-4">
...
</div>
<div class="clearfix"></div>
</div> <!-- /#workArea-->
... and this is the angularjs:
app.controller('AnagTypeController', ['$scope', '$http', 'MsgBox', 'EmployeeMng',
function($scope, $http, MsgBox, EmployeeMng) {
$scope.anagType = [];
$scope.getList = function() {
$http({
method: "GET",
url: "../../xxx"
})
.success(function(data) {
$scope.anagType = data;
EmployeeMng.addAnagType($scope.anagType);
})
.error(function(data, status) {
console.log('ERROR AnagTypeController getList ' + data + ' ' + status);
});
};
$scope.getList();
}
]);
app.controller('CourseCatController', ['$scope', '$http', 'MsgBox', 'EmployeeMng',
function($scope, $http, MsgBox, EmployeeMng) {
$scope.anagType = [];
$scope.courseCats = [];
$scope.courseCatsObbl = [];
$scope.getCourseCats = function() {
$scope.anagType = EmployeeMng.anagType;
...
}
$scope.getCourseCats();
}
]);
Perhaps am I using angular in the wrong way?

Answer 1

Rather than making the call in one controller to set the data, you should move that code to the actual service itself.
All your controllers that need the data can then call the service to get the data.