title: Creating a dynamic pop-up modal with AngularJS
body: <p>I am trying to create a Service to manage all of the different pop-up modals that will be used in my application. So far everything is going well except for having the ability to update the position of the modal on the screen every time it comes into view.</p>
  
  <p>Here is my <strong>UPDATED</strong> directive</p>
  
  <pre><code>app.directive('skModal', function($window){
     return {
        restrict:'EA',
         link: function(scope, elem, attrs){
             var top, left;
  
             scope.$watch(attrs.ngShow, function(newVal){
                 if(newVal) {
                     top = ($window.innerHeight - elem.outerHeight()) / 2;
                     left = ($window.innerWidth - elem.outerWidth()) / 2;
  
                     elem.css({ 'top': top, 'left': left });
                 }
             });
  
         }
     } ;
  });
  </code></pre>
  
  <p>I simply use ng-include to populate any template I wish into the modal, then I use <code>$watch</code> to check when the <code>ngShow</code> variable is flipped.  The problem is that my <code>elem</code> DOM element is not IN the DOM at the time, so the <code>outerHeight()</code> and <code>outerWidth()</code> functions return 0</p>