UI Bootstrap Modal don't close. AngularJS

Question

I was looking for this question on forum and the solution dosn't worked for me, so...

The only way to close the modal is clicking outside of modal, or press ESC on keyboard..

Here is my modal controller:

app.controller('ModalCtrl', function($scope,  $uibModal) {

        $scope.items = [{}]


      $scope.showModal = function(selectedItem) {

          var uibModalInstance = $uibModal.open({
            windowTopClass: 'modal fade ql-modal',
            templateUrl : 'modalContent.html',
            controller : function($scope, $uibModalInstance, $uibModal, item){
                $scope.item = item;

            },
            resolve: {
                item: function(){
                    return selectedItem;
                }
            } // empty storage
          }); 

          uibModalInstance.result.then(function(selectedItem){
            $scope.selected = selectedItem;
            $scope.cancel = function(){
              $uibModalInstance.dismiss('cancel');
            };
          });
      };                  
});

And here is my modal on HTML:

<script type="text/ng-template" id="modalContent.html">
        <!-- Modal -->
                <!--Content-->
                <div class="modal-content">
                    <!--Header-->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="MyModal" aria-label="Close" ng-click="cancel()">
                            <span aria-hidden="true">&times;</span>
                        </button>

                    ...................................

                        <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="cancel()">Close</button>
                    </div>
                </div>
                <!--/.Content-->
        <!--/Modal-->
    </script>

I followed every answer, fiddle, plnkr, but i cannot make it work.

Answer 1

Just move a cancel() method from uibModalInstance.result.then to your modal controller:

var uibModalInstance = $uibModal.open({
        windowTopClass: 'modal fade ql-modal',
        templateUrl : 'modalContent.html',
        controller : function($scope, $uibModalInstance, $uibModal, item){
            $scope.item = item;
            $scope.cancel = function(){
              $uibModalInstance.dismiss('cancel');
            };
        },
        resolve: {
            item: function(){
                return selectedItem;
            }
        } // empty storage
      });