Angular UI Bootstrap $scope.$modalInstance.close causes: Cannot read property 'value' of undefined

Question

I have a few modals, 2 are working perfectly, 1 is getting this exception when closing. (It does manage to close the modal, but angular logs out this exception).

I've looked closer and, the $modalInstance is defined inside the close method, but openedWindows.get($modalInstance) returns undefined.

How can I fix this?

Answer 1

This is a bug in $modal in v0.10.0. See this github issue, and will be fixed in the next release.

@IvanZh has provided answer for a similar question here - Dismiss angular modal on URL change - errors in console

In you controller, once you do $modal.open, add a finally block where you explicitly set the modalInstance to null. plunkr for dismiss modal on URL change is available in the above question. Yours should be very similar.

$scope.modalInstance = $modal.open({
    templateUrl: 'add.html',
    controller: 'AddCtrl'
  });
  $scope.modalInstance.result.then(function() {
    console.log('Success');
  }, function() {
    console.log('Cancelled');
  })['finally'](function(){
    $scope.modalInstance = undefined  // <--- This fixes
  });

Answer 2

You can also get this error if you try to close the $modal immediately. I ran into this when I accidentally forgot to include a delay argument in my call to $timeout. Here is the bad code:

var modal = $modal.open({
  templateUrl: 'static/partials/simple.dialog.html',
  controller: function($scope) {
    $scope.opts = opts;
  }
});

$timeout(function() {
  simple.close();
});

This was fixed by adding the timeout:

$timeout(function() {
    simple.close();
}, opts.timeout);