title: AngularJS Modal Service Stops Working
body: <p>I've created a <code>modal</code> service within my Angular app that I can inject into controllers or directives. I'm running into a problem where after opening/closing a modal multiple times, everything within the modal stops workings. The modal works by grabbing content from a hidden div on the page and popping it into the modal. I've been able to determine that at some point, the value of <code>modal.settings</code> changes. If I insert a <code>debugger</code> at the beginning of my <code>modal.open</code> function and save the value of <code>var x = settings</code> in my console, I can see that after a few cycles, <code>x !== settings</code>. I've also tried comparing <code>modal.settings</code>, but the same thing happens. Eventually, after a few cycles, <code>modal.settings</code> changes and things stop working.</p>
  
  <p>I think I need to refactor this service, but I'm not sure where to start and could use some guidance.</p>
  
  <p>Here is the service code:</p>
  
  <pre><code>app.service('modal', ['$compile', function($compile) {
      var modal = this;
      modal.settings;
      modal.contents;
      modal.overlay = $('&lt;div id="overlay"&gt;&lt;/div&gt;');
      modal.modal = $('&lt;div id="modal"&gt;&lt;/div&gt;');
      modal.content = $('&lt;div id="content"&gt;&lt;/div&gt;');
      modal.closeBtn = $('&lt;div id="close"&gt;&lt;i class="fa fa-times"&gt;&lt;/div&gt;');
  
      modal.modal.hide();
      modal.overlay.hide();
      modal.modal.append(modal.content, modal.closeBtn);
  
      $(document).ready(function(){
          $('body').append(modal.overlay, modal.modal);
      });
  
      modal.open = function (settings) {
          if(!modal.settings) {
              modal.settings = settings;
          }
  
          modal.content.empty().append(modal.settings.content);
          if(modal.settings.class) modal.modal.addClass(modal.settings.class);
          if(modal.settings.height) modal.modal.css({ height: modal.settings.height });
          if(modal.settings.width) modal.modal.css({ width: modal.settings.width });
          if(modal.settings.content_height) modal.modal.css({ height: modal.settings.content_height });
          if(modal.settings.content_width) modal.modal.css({ width: modal.settings.content_width });
          if(modal.settings.fitToWindow) {
              modal.settings.width = $(window).width() - 160;
              modal.settings.height = $(window).height() - 160;
          };
          center(modal.settings.top);
  
          $(window).bind('resize.modal', center);
          modal.modal.show();
          modal.overlay.show();
  
          $(modal.closeBtn).add(modal.overlay).on('click', function(e) {
              e.stopPropagation();
              modal.close();
          });
          $(document).on('keyup', function(e) {
              if (e.keyCode == 27) {
                  modal.close();
                  $(document).unbind('keyup');
              }
          })
      };
  
      modal.close = function() {
          debugger;
          modal.settings.elem.empty().append(modal.settings.content);
          modal.modal.hide();
          modal.overlay.hide();
          modal.content.empty();
          $(window).unbind('resize.modal');
      };
  
      function center(top) {
          if(!top || !isInt(top)) top = 130;
          var mLeft = -1 * modal.modal.width() / 2;
          modal.modal.css({
              top: top + 'px',
              left: '50%',
              marginLeft: mLeft
          });
          function isInt(n) {
             return n % 1 === 0;
          }
      }
  }]);
  </code></pre>
  
  <p>Here is how the modal is opened from the controller or directive:</p>
  
  <pre><code>modal.open({
      content: $('#edit_story_' + story.id),
      elem: $('#edit_story_' + story.id + '_container')
  });
  </code></pre>
  
  <p>I also tried running my <code>elem</code> through the compiler first like so:</p>
  
  <pre><code>modal.open({
      content: $compile($('#edit_story_' + story.id))($scope),
      elem: $('#edit_story_' + story.id + '_container')
  });
  </code></pre>
  
  <p>That solved my initial problem, but now after a few cycles my modal contents are duplicated. I get one form stacked upon another.</p>