ng-click(parameters) open a popup window with dropdown,then selected item and parameters sent to the service

Question

I'm new to Angular-js. I'm using JSP for front end and passing values from UI to controller.Now I need to open a new popup list where user can select an option, then pass all parameters to service ..

ng-click="rewardRetry(singleWinner)"

controller --->

$scope.retryRewardDTO = {
  "mobile_number" : null,
  "draw_id" : 0,
  "lottery_ticket_id" : 0,
  "prize" : 0,
  "reward_method" :null
};

(mobile_number,draw_id,lottery_ticket_id,prize) I can assign like this

$scope.rewardRetry = rewardRetry;
function rewardRetry(rewardRetryDTO) {                     
  $scope.retryRewardDTO.draw_id=rewardRetryDTO.draw_id;
  $scope.retryRewardDTO.lottery_ticket_id=rewardRetryDTO.lottery_ticket_id;
  $scope.retryRewardDTO.prize=rewardRetryDTO.prize;
  $scope.retryRewardDTO.mobile_number=rewardRetryDTO.mobile_number;
  //$scope.retryRewardDTO.reward_method=rewardRetryDTO.reward_method;
}

But here retryRewardDTO.reward_method -->user should be select in popup option. (wallet,m_cash,reload,,, ....etc)

calling to service

winnerService.winnerService.rewardRetry(
  $scope.retryRewardDTO,
  function(data, headers) {
    winnerSearch();
  }, function() {
});

I'm trying do something like below link.but couldn't get a proper output.please some helps to me...

visit :AngularJS Modal Popup

Answer 1

Finally I found the answer and here implemented new rewardService

 $scope.rewardRetry = rewardRetry;
                        function rewardRetry(rewardRetryDTO) {
                        $scope.retryRewardDTO.draw_id=rewardRetryDTO.draw_id;
                        $scope.retryRewardDTO.lottery_ticket_id=rewardRetryDTO.lottery_ticket_id;
                        $scope.retryRewardDTO.prize=rewardRetryDTO.prize;
                        $scope.retryRewardDTO.mobile_number=rewardRetryDTO.mobile_number;
                        //$scope.retryRewardDTO.reward_method=rewardRetryDTO.reward_method;
                        var modalOptions = {


                                                bodyText : 'Are you sure you want to retry '+$scope.retryRewardDTO.prize+'/= reward for 0'+ $scope.retryRewardDTO.mobile_number+' ?  Please select a reward method first and confirm'

                                        };


                       rewardService.showModal({}, modalOptions).then(
                                       function(result) {
                       $scope.retryRewardDTO.reward_method = result;
                                       $('#retry-'+rewardRetryDTO.draw_id+'-'+rewardRetryDTO.lottery_ticket_id).hide();
                            $timeout(function() {
                                winnerService.winnerService.rewardRetry(
                                                $scope.retryRewardDTO,
                                                function(data, headers) {
                                                winnerSearch();
                                                }, function() {
                                                });
                            });
                            });
                        }
                        ;

My reward_option.jsp file

<%@ taglib prefix="sec"
    uri="http://www.springframework.org/security/tags"%>
<div class="option">
    <div class="pull-right"></div>
    <div>Copyright &copy; Lucky889 2016</div>
    <input type="hidden" value="<sec:authentication property="principal.userType" />" id="user_type" />
    <input type="hidden" value="<sec:authentication property="principal.operator" />" id="user_operator" />
</div>

<script type="text/ng-template" id="rewardModalContent.html">
<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>


                      <div class="modal-body">

                      <%-- <p ng-repeat="(key,singleReward) in modalOptions.rewardList">{{key}}----{{singleReward}}</p> --%>

                           <div class="form-group">
                                <label class="control-label" for="reward">Reward
                                Method</label><select name="reward" id="reward"
                                    ng-model="reward_method" class="form-control">
                                    <option ng-repeat="(key,singleReward) in modalOptions.rewardList"
                                        value="{{key}}">{{singleReward}}</option>
                                 </select>

                             </div>
                        </div>

   <div class="modal-footer">
   <button class="btn btn-primary"
                data-ng-click="modalOptions.confirm(reward_method)">{{modalOptions.actionButtonText}}</button>
     <button type="button" class="btn"
             data-ng-click="modalOptions.cancel()">{{modalOptions.closeButtonText}}</button>

   </div>

</script>

Here is my rewardService

angular.module("zmessengerRewardApp.service", []).service(
        'rewardService',
        function(toastr, $uibModal, $log) {

            var showHeaderErrorMessage = function(header) {
                toastr.clear();
                toastr.error(header['lms-message'],
                        header['lms-root-cause-message']);
            };

            var showHeaderSuccessMessage = function(header) {
                toastr.clear();
                toastr.success(header['lms-message'],
                        header['lms-root-cause-message']);
            };




            var modalDefaults = {
                backdrop : true,
                keyboard : true,
                modalFade : true,
                templateUrl : 'rewardModalContent.html'
            };

            var modalOptions = {
                closeButtonText : 'Cancel',
                actionButtonText : 'Confirm',
                headerText : 'Confirmation',
                bodyText : 'Perform this action?',
                rewardList : {reload:'Auto Reload',manual_reload:'Manual Reload',ez_cash:'Ezcash',mcash:'MCash',wallet:'Wallet',bank:'Bank Transfer'}



            };

            function showModal(customModalDefaults, customModalOptions) {
                if (!customModalDefaults)
                    customModalDefaults = {};
                customModalDefaults.backdrop = 'static';
                return show(customModalDefaults, customModalOptions);
            };

            function show(customModalDefaults, customModalOptions) {
                // Create temp objects to work with since we're in a singleton
                // service
                var tempModalDefaults = {};
                var tempModalOptions = {};

                // Map angular-ui modal custom defaults to modal defaults
                // defined in service
                angular.extend(tempModalDefaults, modalDefaults,
                        customModalDefaults);

                // Map modal.html $scope custom properties to defaults defined
                // in service
                angular.extend(tempModalOptions, modalOptions,
                        customModalOptions);

                if (!tempModalDefaults.controller) {
                    tempModalDefaults.controller = function($scope,
                            $uibModalInstance) {
                        $scope.modalOptions = tempModalOptions;
                        $scope.modalOptions.confirm = function(result) {
                            $uibModalInstance.close(result);
                        };

                        $scope.modalOptions.cancel = function(result) {
                            $uibModalInstance.dismiss('cancel');
                        };

                    }
                }

                return $uibModal.open(tempModalDefaults).result;
            };



            return {

                showHeaderErrorMessage : showHeaderErrorMessage,
                showHeaderSuccessMessage : showHeaderSuccessMessage,
                showModal : showModal,

            };

        });