Not able to Access Services on Two Controller AngularJs - angularjs

Question

I Need to use same data on Two different Controller, One is page while other is Modal Popup. I created service which will perform $http.get to pull data. However, when I apply service to Modal Popup, it stops loading and even data is not load anywhere.
My Service
(function(){
'use strict';
angular.module('sspUiApp.services')
.service('AdUnitService', ['$http', '$rootScope', 'API_URL', function($http, $scope, API_URL) {
var data = $http.get('data/selectAdUnits.json');
return {
getAdFormats: function() {
console.log("inside function");
return data;
},
setAdFormats: function(value) {
}
}
}]);
})();
My Both Controller with Services added.
(function(){
'use strict';
angular.module('sspUiApp.controllers')
.controller('AdUnitFormatCtrl', ['$scope', '$state', 'AdUnitService', function ($scope, $state, AdUnitService) {
$scope.details = AdUnitService.getAdFormats();
}])
.controller('ModalDemoCtrl', ['AdUnitService', function ($scope, $uibModal, AdUnitService) {
$scope.open = function (size) {
// $scope.details = AdUnitService.getAdFormats();
$scope.$modalInstance = $uibModal.open({
scope: $scope,
templateUrl: 'views/select_ad_format.html',
size: size,
});
};
$scope.cancel = function () {
$scope.$modalInstance.dismiss('cancel');
};
$scope.details = AdUnitService.getAdFormats();
alert($scope.details);
}])
})();
And HTML
<div id="selectAdFormats" ng-controller="ModalDemoCtrl">
<div class="container">
<div class="ad-format-section">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-2 col-xs-6 selectedAdFormatData" ng-repeat="frmt in details.adformat">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<img ng-src="../images/{{ frmt.ad_image }}" ng-if="frmt.ad_image"/>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<span class="formatName">{{ frmt.name }}</span>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<span class="resSize">{{ frmt.size }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

angular.module('sspUiApp.services')
angular.module('sspUiApp.controllers')
Your service is in a different module, that's why you can't get to it, if you declare it into the same module it should work
Option 2:
Include your second module sspUiApp.services in your decleration of sspUiApp.controllers
for more info: Angular js seperation to different modules in different js files
Update:
var data = $http.get('data/selectAdUnits.json');
return {
getAdFormats: function() {
console.log("inside function");
return data;
},
setAdFormats: function(value) {}
}
The problem is is that data is asynchronious and you don't treat it like so:
$scope.details = AdUnitService.getAdFormats();
alert($scope.details);
You try to alert a promise, instead of waiting for it to resolve and alerting the result, if you change it into the following it should work:
AdUnitService.getAdFormats().then(function(details) {
alert(details);
});
This way angular will wait on the result before executing the code.
More info about Angular promises here: https://docs.angularjs.org/api/ng/service/$q