Angular modal not able to close - angularjs

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

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');
};
};

Answer 2

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>