Angular Modal Service how to write the function inside modal popup. Orelse How to pass a new controller function inside Modal Pop Up

Question

This is the code for Modal pop up to show. I have to insert the function inside the controller. Here How to pass the function inside modal pop up controller.

scope.show = function(ChartData) {
    ModalService.showModal({
        templateUrl: "scaleRecipePopUp.html",
        controller:function(){
            // Here i have to pass the function. 
        }
    }).then(function(modal) {
        modal.element.modal();
        modal.close.then(function(result) {
            scope.message = "You said " + result;
        });
    });
}

This is the function which i have to pass inside the modal pop up. In place of controller. Apply manual function is the function name which is written in service. Either it has to called inside a separate controller. Please suggest some other solution.

this.applyManualScale = function(){    
    if(scope.isAutoScale){
       scope.max[scope.idNum] = null;
       scope.min[scope.idNum] = null;
       scope.isAutoScaleArr[scope.idNum] = true;
       scope.plotDataSeries();
       $('#scaleModal').modal('hide');
    }
    else if(scope.maxVal!=null && scope.minVal!=null){
       scope.max[scope.idNum] = scope.maxVal;
       scope.min[scope.idNum] = scope.minVal;
       scope.isAutoScaleArr[scope.idNum] = false;
       scope.plotDataSeries();
       $('#scaleModal').modal('hide');
    }
};

This is my directive

.directive('hcarea', function (Data, ModalService) {
    return {
        restrict: 'E',
        templateUrl: "../page/trendChart.html",
        scope: {
          options: '='
        },
        link: function (scope, element) {   
            var chart;
            scope.show = function() {
                    ModalService.showModal({
                        templateUrl: "scalePopUp.html",
                        controller:function(){
                        }
                    }).then(function(modal) {
                        modal.element.modal();
                        modal.close.then(function(result) {
                            scope.message = "You said " + result;
                        });
                    });
                };

                }

                }
                }

This my html file where it is considered as ng-template.

<script type="text/ng-template" id="modal.html">
     <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
          </div>
          <div class="modal-body">
            <p>It's your call...</p>
            <p>Fry lives in {{futurama.city}}</p>
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
 </script>

Answer 1

Your question is not clear but still I guess this is your problem.

From a HTML you have to show a modal and write function which are performed in the button click inside the modal.

For this problem I would suggest you with the following

 <div ng-controller="SampleController">
    <!--your HTML content-->
     <button class="btn btn-default"  data-toggle="modal" data-target="#myModal">
                  Button
     </button>
<!--Your modal content will be as below-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times</button>
        <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
        <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="ButtonClickMethod()">CustomButton</button>
    </div>
   </div>
 </div>
</div>

Your controller will look like

angular.module('myApp').controller('SampleController',
        function ($scope) {
            $scope.ButtonClickMethod = function () {
                    your logic goes here
            };
});