title: Angularjs watch for change in parent scope
body: <p>I'm writing a directive and I need to watch the parent scope for a change. Not sure if I'm doing this the preferred way, but its not working with the following code:</p>
  
  <pre><code>  scope.$watch(scope.$parent.data.overlaytype,function() {
      console.log("Change Detected...");
    })
  </code></pre>
  
  <p>This it logged on window load, but never again, even when overlaytype is changed.</p>
  
  <p>How can I watch <code>overlaytype</code> for a change?</p>
  
  <p>Edit: here is the entire Directive. Not entirely sure why I'm getting a child scope</p>
  
  <pre><code>/* Center overlays vertically directive */
  aw.directive('center',function($window){
    return {
      restrict : "A",
      link : function(scope,elem,attrs){
  
        var resize = function() {
          var winHeight = $window.innerHeight - 90,
              overlayHeight = elem[0].offsetHeight,
              diff = (winHeight - overlayHeight) / 2;
              elem.css('top',diff+"px");
        };
  
        var watchForChange = function() {
          return scope.$parent.data.overlaytype;
        }
        scope.$watch(watchForChange,function() {
          $window.setTimeout(function() {
            resize();
          }, 1);
        })
  
        angular.element($window).bind('resize',function(e){
          console.log(scope.$parent.data.overlaytype)
          resize();
        });
      }
    };
  });
  </code></pre>