angular modal not closing ($uibModal )

Question

angular
.module('angProj')
.controller('UserCtrl',
    ['$scope', '$uibModal',
        function ($scope, $uibModal) {

            $scope.results = function (content, completed) {
                var modalInstance = $uibModal.open({
                        backdrop: 'static',
                        keyboard: false,
                        animation: $scope.animationsEnabled,
                        templateUrl: '/Scripts/angularApp/views/user-modal.html',
                        controller: 'UserModalCtrl',
                        resolve: {
                            items: function () {
                                return $scope.items;
                            }
                        }
                    });

                if (!completed || content.length === 0) {
                    return;
                }

        modalInstance.close();
        modalInstance.dismiss('cancel');

I am not able to close the model on user add completion.. On user-modal i am showing progress bar.. the code runs fine without error but the modal remains open. I also tried $uibModalInstance but the controller throws error: unknown provider (not able to inject $uibModalInstance on the same UserCtrl) I am injecting ui.bootstrap (ui-bootstrap-tpls-1.1.2.js)

Thanks for your time.

Answer 1

Use modalInstance.close() inside your UserModalCtrl controller

app.controller('UserModalCtrl', ['$scope', '$modalInstance' function($scope ,modalInstance {
  $scope.close = function () {
   modalInstance.close();
  };
}]);

Answer 2

I have done something similar, I think.

I have a $modal controller that looks like this

angular.module('myApp').controller('infoCtrl', function ($scope, $uibModalInstance, loading) {

  $scope.editable = loading;

  $scope.$watch('editable.status', function(newValue, oldValue) {
    if (newValue == 'success'){
        // close modal
        $uibModalInstance.close('ok');
    } else if (newValue == 'error') {
        // show error message
    } 
  });
});

The injected loading is a service that looks like this

myApp.factory('loading', function() {
  return {
    status: ''
  }
});

And when I change the status of my loading service to 'success' (from anywhere, not the modal controller) the modal is closed.

I don't know if this is exactly what you were asking for, but I hope it helps, also, just ask if something is unclear!

EDIT: So let's say you have a service with a value isCompleted: false , inject that service into your modal controller, and use the $watch function, then when that isCompleted is changed to true , you close the modal.