Angular ng-click does not work after an exception in a ng-map directive

Question

I used ng-map (http://ngmap.github.io/) in a modal to serve googlemap in my application, but after an exception in that directive my close button in the footer wont work. When I put that close button before the directive(for example in header) it works! How should I catch such exceptions and keep the control?

my modal is as bellow:

 <script type="text/ng-template" id="views/OfficeMapModal.html">
        <div class="modal-header">
            <div class="modal-title">{{address}}</div>
        </div>
        <div class="modal-body">
            <ng-map zoom="15" center="{{center.latitude}}, {{center.longitude}}">
                <marker position="{{center.latitude}}, {{center.longitude}}"></marker>
            </ng-map>
        </div>
        <div class="modal-footer">
            <div class="btn btn-default select-again" data-ng-click="cancel()">close</div>
        </div>
 </script>

and my modal controller is as bellow:

angular.module('portalApp').controller('GoogleMapModalController', ['$scope', 'NgMap', '$uibModalInstance', 'address', 'center', function ($scope, NgMap, $uibModalInstance, address, center) {
$scope.address = address;

$scope.center = center;

NgMap.getMap().then(function (map) {
    google.maps.event.trigger(map, 'resize');
    var myLatLng = new google.maps.LatLng(center.latitude, center.longitude);
    map.setCenter(myLatLng);
});

$scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
};}]);

Edit:

Error: google is not defined t@http://localhost:3000/bower_components/ngmap/build/scripts/ng-map.min.js:1:2423

Answer 1

You are calling the method getMap() so if it fails anywhere in that method with out handling errors the execution will not continue. This would mean that the $scope.cancel will not even be declared.

If you are expecting errors in this library or specifically in the process of calling getMap(), ideally you should try to resolve these errors. But the simplest solution to keep the cancel button working in circumstances where you are not able to resolve the errors due to uncontrollable conditions is to move the $scope.cancel declaration above the NgMap initialization, put a try catch around the call and output the error details:

    angular.module('portalApp').controller('GoogleMapModalController', ['$scope', 'NgMap', '$uibModalInstance', 'address', 'center', function ($scope, NgMap, $uibModalInstance, address, center) {
    $scope.address = address;

   $scope.center = center;

   $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };

   try { // safely attempt to initialize 
      NgMap.getMap().then(function (map) {
         google.maps.event.trigger(map, 'resize');
         var myLatLng = new google.maps.LatLng(center.latitude, center.longitude);
         map.setCenter(myLatLng);
      });
   } catch(err) { } // out put error
   }]);