data is not sharing between Page & Modal Popup (Between Controller) AngularJs - angularjs

Question

I'm not able to share data between My Page & Modal Popup.
Exact Requirement.
I'm loading data through Services on my modal popup page. And the selected data on this Modal Popup should be displayed on Page when Modal is closed. It always return blank value though data is pushed.
Code is as below.
(function(){
'use strict';
angular.module('sspUiApp.controllers')
.service('AdUnitService', ['$http', 'API_URL', function($http, API_URL) {
var allAdFormats = [];
var selectedAdFormats = [];
$http.get( API_URL + '/ssp/adformat/all')
.then(function onSuccess(response) {
allAdFormats = response.data;
},
function onError(response) {
allAdFormats = [];
});
return {
setSelectedFormats: function(item) {
selectedAdFormats.push(item);
},
getSelectedAdFormats: function() {
return selectedAdFormats;
},
getAdFormats: function() {
return allAdFormats;
}
};
}]);
})();
My Both Controller
(function(){
'use strict';
angular.module('sspUiApp.controllers')
.controller('AdUnitFormatCtrl', function ($scope, $http, $state, AdUnitService) {
$scope.selectedAdUnit = AdUnitService.getSelectedAdFormats();
})
.controller('ModalDemoCtrl', function ($scope, $http, $state, AdUnitService, $uibModal) {
$scope.allAdFormats = AdUnitService.getAdFormats();
$scope.open = function (size) {
$scope.$modalInstance = $uibModal.open({
scope: $scope,
templateUrl: 'views/select_ad_format.html',
size: size,
});
};
$scope.cancel = function () {
$scope.$modalInstance.dismiss('cancel');
};
$scope.add = function (value) {
AdUnitService.setSelectedFormats(value);
};
});
})();
My Modal Html Page
<div class="ad-format-section" ng-controller="ModalDemoCtrl">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-2 col-xs-6 selectedAdFormatData" ng-repeat="frmt in allAdFormats.adformat">
<div ng-click="add(frmt)">
<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>
And Default Page
<div class="ad-units-section" ng-controller="AdUnitFormatCtrl">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 selectedAdUnitsData" ng-repeat="frmt in selectedAdUnit.adformat">
<div class="col-lg-1 col-md-1 col sm-6 col-xs-12 nopadding"><img ng-src="../images/{{ frmt.ad_image }}" ng-if="frmt.ad_image"/></div>
<div class="nopadding-left col-lg-3 col-md-3 col sm-6 col-xs-12"><span class="formatName">{{ frmt.name }}</span></div>
<div class="col-lg-2 col-md-1 col sm-6 col-xs-12 nopadding-right">
<span class="adType">{{ frmt.type }}</span>
</div>
<div class="col-lg-3 col-md-2 col sm-6 col-xs-12 nopadding">
<span class="floorPrice">{{ frmt.floor_price }}</span>
</div>
<div class="col-lg-1 col-md-5 col sm-6 col-xs-12 nopadding">
<span class="resSize">{{ frmt.size }}</span>
</div>
<div class="col-lg-2 col-md-5 col sm-6 col-xs-12 text-right nopadding">
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting watchAd"></span>
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting settingAd"></span>
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting deleteAd"></span>
</div>
</div>
</div>
</div>
Thanks.

Answer 1

Try using factory instead of service.
angular.module('sspUiApp.controllers')
.factory('AdUnitService', ['$http', 'API_URL', function($http, API_URL) {
Right now you have 2 different instances of the service. When you inject the service dependency it creates a new instance of the service. Factories on the other hand create use the same instance when they get injected. That way you should be able to share your data between to 2 controllers.
Services
When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService().
Factories
When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.
Read more: AngularJS: Service vs provider vs factory