Angular modal not able to close

Question

I am using angular modal as per the example here http://plnkr.co/edit/bDqAll8CYwu7DGfSs7FC?p=preview

Here is my app.js and controller code

app.js

var app = angular.module("app", ['trNgGrid', 'ngAnimate', 'ngRoute', 'treasure-overlay-spinner', 'ui.bootstrap']);

app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
        when('/Employee/', {
            templateUrl: '/app/views/Employee.html'
        }).
        otherwise({
            redirectTo: '/Employee'
        });
    }]);

Controller code

angular.module('app').controller('EmployeeController',['$scope','$modal','appService', function ($scope, $modal, appService) {


    var employeesList = appService.GetEmployess();
    var modalInstance;


    $scope.clickMe = function () {
        modalInstance = $modal.open(
                {
                    templateUrl: '/app/views/EditEmployee.html',
                    resolve: {
                        callerData: function () { }
                    }
                })
        modalInstance.result.then(function () { });
    }

    $scope.cancel = function () {
        modalInstance.close('closed result');
    };

    $scope.spinner = {
        active: true
    };
    employeesList.then(function successCallback(response) {
        $scope.Employees = response.data;

    }, function errorCallback(response) {

    }).finally(function () {
        $scope.spinner = {
            active: false
        };
    });

}]);

Here is my HTML code where I am calling controller

<div ng-controller="EmployeeController">
    <input type="button" ng-click="clickMe()" value="Click" />
    <input type="button" ng-click="cancel()" value="cancel" />
    <treasure-overlay-spinner active='spinner.active'>
        <table tr-ng-grid='' items='Employees' page-items="10"></table>
    </treasure-overlay-spinner>
</div>

I tried as per the example suggested in plunker but not able to hide the modal, so can let me know how can I integrate it correctly

Answer 1

Sorry but I cant see in your code how have you tried to implement the modal view.

In your example, it´s made by this: (HTML:)

 <button ng-click="open()" class="btn btn-default">MODAL3</button>
   <script type="text/ng-template" id="myModalContent2.html">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal3!</h3>
            </div>
            <div class="modal-body">
                    <h3>MODAL TITLE</h3>
                         <button ng-click="otherFunction()" class="btn btn-default">Do stuff</button>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="close()">Cancel</button>
            </div>
 </script>

And into controllers (app.js):

$scope.open = function (size) {

            var modalInstance = $modal.open({
              templateUrl: 'myModalContent2.html',
              controller: ModalInstanceCtrl,
              size: size,
              scope: $scope

            });
            console.log(modalInstance);


            modalInstance.result.then(function (selectedItem) {
              console.log('closed :'+selectedItem);
            }, function () {
               console.log('canceled');
            });
        };

      $scope.otherFunction = function () {
        console.log('otherFunction');
        //DO SOME STUFF 
        //....
        //THEN CLOSE MODAL HERE
      }

EDIT: I see in your controllers how have you tried to use open() and etc to open a modal view, but its not defined (with its script part) into html

EDIT2: THIS IS MY WAY TO USE MODALS: (controllers.js, inside the controller)

        $scope.set = function() {
            $scope.modal.hide();                
        }   
        $scope.cancel = function() {
         //this is my function inside modal
            $scope.modal.hide();
        }           
            $scope.showModal = false;
                $scope.show = function(){
                $scope.showModal = !$scope.showModal;
            };

            $ionicModal.fromTemplateUrl('modal3.html', function(modal) {
                $scope.modal = modal;   

              }, {
                animation: 'slide-in-up',
                focusFirstInput: true,
                scope: $scope
              });     

In my html , like in the example, under the button to open:

<button class="row header" ng-click="modal.show()">mymodal</button></td>
<script id="modal3.html" type="text/ng-template">
      <div class="modal">     
      *...stuff...*    
      </div>
</script>

Answer 2

I changed my controller as follows and working as expected now

angular.module('app').controller('EmployeeController', function ($scope, $modal, appService) {

    var employeesList = appService.GetEmployess();

    $scope.spinner = {
        active: true
    };
    employeesList.then(function successCallback(response) {
        $scope.Employees = response.data;

    }, function errorCallback(response) {

    }).finally(function () {
        $scope.spinner = {
            active: false
        };
    });

    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: '/app/views/EditEmployee.html',
            controller: ModalInstanceCtrl,
            size: size,
            scope: $scope

        });
        console.log(modalInstance);


        modalInstance.result.then(function (selectedItem) {
            console.log('closed :' + selectedItem);
        }, function () {
            console.log('canceled');
        });
    };

    $scope.otherFunction = function () {
        console.log('otherFunction');
        //DO SOME STUFF 
        //....
        //THEN CLOSE MODAL HERE
    }
});


var ModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        console.log('var var: ' + $scope.VARCONTROLLER);
        $modalInstance.close('closed result');
    };

    $scope.cancel = function () {
        console.log('cancel cancel');
        $modalInstance.dismiss('cancel');
    };
};