problem with angular - bootstrap $modal. after opening once and closing, doesn't really want to open again.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <script data-require="angular.js@1.0.8" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script data-require="angular-ui-bootstrap@0.6.0" data-semver="0.6.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    
    <script src="modal.js"></script>
    <script src="solution.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="app"  >
    <h1>Hello Plunker!</h1>
    
    <div ng-view></div>
    
  </body>

</html>

/* Styles go here */
div.clickable {
  cursor: pointer;
}

.modal {
 display: block;
 background: #fff;
 width:50%;
 margin:auto;
}

<div class="modal-header">
    <h3>Hi There</h3>
</div>
<div class="modal-body">
    after this closes, will it open again?
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

'use strict';

var app = angular.module('app', ['ui.bootstrap', 'modalmodule','solution']);

app.controller('SomeCtrl', ['$scope', 'MyModalService',
  function($scope, MyModalService) {
    $scope.msg = '$modal problem...';
    // MyModalService.show();
  }
]);

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main.html',
        controller: 'SomeCtrl',
      })
      .when('/other', {
        templateUrl: 'other.html',
        controller: 'SomeCtrl',
      })
      .when('/test', {
        templateUrl: 'test.html',
        controller: 'TestCtrl',
      })
  }
]);


app.controller('TestCtrl', ['$scope','$modal',
  function($scope, $modal) {

    $scope.open = function() {
      var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: 'TestModalCtrl',
        resolve: {
          items: function() {
            return $scope.email;
          }
        }
      });

      modalInstance.result.then(function(selectedItem) {
        if (selectedItem) {
          console.log('selected item is ' + selectedItem);
        } else {
          console.log('no item selected');
        }
      }, function() {
        $log.info('Modal dismissed at: ' + new Date());
      });
    }
  }
]);

app.controller('TestModalCtrl', ['$scope', '$modalInstance',
  function($scope, $modalInstance) {
    $scope.msg = '$modal problem...';

    $scope.ok = function() {
      $modalInstance.close();
    };

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

'use strict';

var modalMod = angular.module('modalmodule', []);

/**
 * service to show modal 
 */
modalMod.factory('MyModalService', ['$window', '$rootScope', '$log', '$modal',
  function ($window, $rootScope, $log, $modal) {

    $rootScope.$on('show-modal', function (event) {
      console.log('modal service react to show-modal broadcast')
      showTheModal();
    });

    function showTheModal() {
//      var modalPromise =
      $modal.open({
        templateUrl: 'modal.html',
        controller: 'ShowModalCtrl',
        backdrop: 'static',
        keyboard: true
      });
    }

    function MyModalService() {
      $log.info('starting modal service');
    }

    MyModalService.prototype.show = function () {
      showTheModal();
    };

//    return new MyModalService();
    return {show: function () {
      showTheModal();
    }};
  }]);


modalMod.directive('showModal', 
  function () {
    return {
      restrict: 'A',
      priority: 10,
      link: function (scope, element/*, attrs, ngModelController*/) {
        console.log('directive show modal active ');
        var checkUserShowModal = function (event) {
          console.log('directive gona show modal ');
//            event.stopImmediatePropagation();
            scope.$emit('show-modal');
        };
        element.bind('click', checkUserShowModal);
      }
    };
  });


modalMod.controller('ShowModalCtrl', ['$scope','$rootScope', '$log', '$modalInstance', '$location',
  function ($scope, $rootScope, $log, $modalInstance, $location) {
    $log.info('show modal ctrl');

    $scope.ok = function () {
      $log.info('ok!');
      $scope.$close();
    };

    $scope.cancel = function () {
//      $modalInstance.dismiss('cancel');
      $log.info('cancel!');
      $scope.$close();
    };

  }]);

  <h1>other page</h1>
  <a href="#/"> go back</a>

{{ msg }}
<p>the problem is that after opening/closing the modal for the first time, it doesn't want to open again. A weird thing is that if the $location is changed by angular then suddenly the modal appears.</p>
<button class="btn" show-modal>click me to open a modal, you can close it by pressing esc</button>
   
<p><a href="#/other">click to goto other location</a></p>
<p><a href="#/test">testing grounds</a></p>

<body ng-app="app" ng-controller="SomeCtrl">
  <h1>testing grounds</h1>
  
   <button class="btn" ng-click="open()">Open me!</button>
   
  <p><a href="#/"> go back</a></p>
</body>

'use strict';

var solutionMod = angular.module('solution', []);

/**
 * service to show modal
 */
solutionMod.factory('solutionModalService', ['$window', '$rootScope', '$log', '$modal',
  function($window, $rootScope, $log, $modal) {

    $rootScope.$on('show-modal-solution', function(event,data) {
      console.log('modal service react to show-modal broadcast')
      showTheModal(data);
    });

    function showTheModal(data) {
      //      var modalPromise =
      data = data || {};
      $modal.open({
        templateUrl: 'modal.html',
        controller: 'SolutionModalCtrl',
        backdrop: 'static',
        keyboard: true
      });
      //added this because of a prob with modal not opening. modal will only open on next apply
      $rootScope.$$phase || $rootScope.$apply();
    }

    function MyModalService() {
      $log.info('starting modal service');
    }

    MyModalService.prototype.show = function() {
      showTheModal();
    };

    //    return new MyModalService();
    return {
      show: function() {
        showTheModal();
      }
    };
  }
]);


solutionMod.directive('showModalSolution',
  function() {
    return {
      restrict: 'A',
      priority: 10,
      link: function(scope, element /*, attrs, ngModelController*/ ) {
        console.log('directive show modal active ');
        var checkUserShowModal = function(event) {
          console.log('directive gona show modal ');
          //            event.stopImmediatePropagation();
          scope.$emit('show-modal-solution');
        };
        element.bind('click', checkUserShowModal);
      }
    };
  });


solutionMod.controller('SolutionCtrl', ['$scope',
  function($scope) {
    //nothing here, directive takes care of stuff
  }
]);

solutionMod.controller('SolutionModalCtrl', ['$scope', '$rootScope', '$log', '$modalInstance', '$location',
  function($scope, $rootScope, $log, $modalInstance, $location) {
    $log.info('show modal ctrl');

    $scope.ok = function() {
      $log.info('ok!');
      $modalInstance.close();
    };

    $scope.cancel = function() {
      //      $modalInstance.dismiss('cancel');
      $log.info('cancel!');
      $modalInstance.dismiss();
    };

  }
]);

<body ng-app="app" ng-controller="SolutionCtrl">
  <h1>solution?</h1>
  
   <button class="btn" show-modal-solution >Open me!</button>
   
  <p><a href="#/"> go back</a></p>
</body>