title: Modal seems to have the wrong scope, show up one extra time each click
body: <p>When I create a modal, with a dynamic message that is fetched from the server (not sure this is relevant), the modal opens fine with the message. However, if I fail one more time and the modal is created again it will show two modals, and if I fail one more time it will show three different modals that I have to close with the "Close"-button.</p>
  
  <p>My thoughts is that this is some $scope-related issue that I've screwed up somehow but I can't figure out how to fix it, or that the $modalInstance.dismiss() does not work as it should.</p>
  
  <p>I'm using angular-ui to get access to $modal.</p>
  
  <p>I have created a ModalsFactory that is called whenever I want to create a modal. As you can see I have an openModal-function that holds the modal-code and three other functions that call this depending on which modal to show:</p>
  
  <pre><code>angular.module('tsModule')
      .factory('ModalsFactory',
      function ($modal) {
          return {
              openModal: function(template, message) {
                  console.log("OPENING");
                  $modal.open({
                      templateUrl: template,
                      controller: function($scope, $modalInstance) {
                          $scope.message = message;
                          $scope.cancel = function () {
                              $modalInstance.dismiss();
                          };
                      },
                      size: 'm'
                  });
              },
              openSuccessModal: function(message) {
                  this.openModal('/static/partials/modals/modal_success.html', message);
              },
  
              openFailedModal: function(message) {
                  this.openModal('/static/partials/modals/modal_failed.html', message);
              },
  
              openInfoModal: function(message) {
                  this.openModal('/static/partials/modals/modal_info.html', message);
              }
          };
      }
  );
  </code></pre>
  
  <p>This can be opened by a $broadcast:</p>
  
  <pre><code>$rootScope.$on(AUTH_EVENTS.loginFailed, function(e, res) {
      console.log("LOGIN FAILED");
      ModalsFactory.openFailedModal(res.message);
  });
  </code></pre>
  
  <p>And this $broadcast can be triggered by if the server returns an error-code by some sort:</p>
  
  <pre><code>console.log("CALLING $BROADCAST");
  data.message = "Felaktiga inloggningsuppgifter.";
  $rootScope.$broadcast(AUTH_EVENTS.loginFailed, data);
  </code></pre>
  
  <p>What I have found out so far is:
  The OPENING-console text will shown as many times as the number of modals shown
  The LOGIN FAILED-console text will be shown as many times as the number of modals shown
  The CALLING $BROADCAST-console text will only be shown once</p>
  
  <p>I've found someone with the exact same problem as me but not using Angular <a href="https://stackoverflow.com/questions/14873109/twitter-bootstrap-modal-multiple-event-firing">here</a></p>