AngularJS: Load templateUrl after all data received by the controller

I'd like to display my template when the data coming from my server are loaded.

I created a module called Services with inside some services to load my data, I'm using HomeService for my example.

var app = angular.module('MyApp', ['Services']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', 
        {
            templateUrl: 'home.html',
            controller: 'Home_Ctrl',
            resolve: {
                loadData: //??
            }
        });
}]);

app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {

    $scope.data = HomeService.getData();

}

I guess I need to create a promise to do that. Is it possible to put this function inside my controller?

I mean, I don't want something like that:

var ctrl = app.controller('Home_Ctrl', ['$scope', 'HomeService', function($scope, HomeService) {
    //Do something
}

//Promise
ctrl.fct = function($q) {
}

I want something like that:

app.controller('Home_Ctrl', ['$scope', '$q', 'HomeService', function($scope, $q, HomeService) {

    //Do something

    //Promise
    this.fct = function() {}
}

Any idea?

Thanks.

You could use resolve property of controller. You could create a object which will return promise and assign to controller resolve function and inject the same in controller definition kindly see very simple example 

$routeProvider.when('/ExitPoll', {
        templateUrl: '/partials/ExitPoll.html', controller: exitpollController, resolve: {
            responseData: ['$http', function ($http) {
                return $http.get('/Candidate/GetExitPolls/hissar').then(function (response) {
                    return response.data;
                });
            }],

        }
    });


var exitpollController = ['$scope', '$http','responseData','$rootScope',
function ($scope, $http, responseData, $rootScope) {
}];