setting the scope elements after the http call in angularjs - angularjs

Question

I am new to AngularJs. I am calling a http get call to fetch a list of names and I want it as soon as the app loads. Hence I have written the logic to get the list of names in the run function on angularjs. I am using a custom service to fetch the names and calling the function inside the run method.
The code in the service method is as below:
angular.module('myApp')
.service('fetchData', function ($http, $rootScope) {
// AngularJS will instantiate a singleton by calling "new" on this function
this.fetchNames = function() {
$http.get('http://hostname:port/names').success(function (person) {
$rootScope.names = person.names;
});
}
In my app.js, I have the code as below:
angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
})
.run (function($rootScope, fetchData){
//first make an ajax call and fetch all the applicatons for the given BU
fetchData.fetchNames();
});
But by the fetchNames gets the names form the http call, the run method is already executed.
Please let me know where I am going wrong.

Answer 1

In your service you can return the promise and then handle the success in your run function.
angular.module('myApp')
.service('fetchData', function ($http, $rootScope) {
// AngularJS will instantiate a singleton by calling "new" on this function
this.fetchNames = function() {
return $http.get('http://hostname:port/names');
}
Now you can handle the success event in run.
.run (['$rootScope', 'fetchData', function($rootScope, fetchData){
//first make an ajax call and fetch all the applicatons for the given BU
fetchData.fetchNames().success(function (person) {
$rootScope.names = person.names;
);
}]);