title: Get element scope from attribute directive
body: <p>I'm trying to extend functionality of <em>any</em> directive by simply attaching an attribute directive, but I'm having trouble getting the scope of the element on which the attribute is defined.</p>
  
  <p>For example, I have this template:</p>
  
  <pre><code>&lt;div class="flex-item-grow flex-item flex-column report-area"&gt;
      &lt;sv-report sv-reloadable id="reportId"&gt;&lt;/sv-report&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here, <code>sv-reloadable</code> has some implicit understanding of <code>sv-report</code>, but <code>sv-report</code> has <em>no idea</em> about <code>sv-reloadable</code>.</p>
  
  <p>I've defined <code>sv-reloadable</code> as:</p>
  
  <pre><code>angular
      .module( 'sv-reloadable', [
          'sv.services',
      ])
      .directive('svReloadable', function(reportServices, $timeout) {
          return {
              restrict: 'A',
              controller: function($scope, $timeout) {
                  $scope.$on('parameter-changed', function(evt, payload) {
                      evt.stopPropagation();
                      $scope.viewModel = getNewViewModel(payload);/* hit the server to retrieve new data */
                  });
              }
          };
      });
  </code></pre>
  
  <p>Now, <code>$scope</code> in <code>sv-reloadable</code> is the <em>parent</em> scope of <code>sv-report</code>. I'm wanting <code>sv-reloadable</code> to be able to attach a listener to <code>sv-report</code>'s scope, and swap out properties of that scope. I understand that it's possible to grab the sibling scopes, but that causes problems when trying to figure out exactly which element it's attached to.</p>
  
  <p>I attempted the following:</p>
  
  <pre><code>link: function(scope, element, attrs) {
      ele = element;
      var actualScopyThingy = element.scope();
  },
  </code></pre>
  
  <p>Which I had <em>assumed</em> would give me the scope of the element the attribute was defined on, but alas, it still returns the <em>parent</em> scope of the element.</p>
  
  <p>If it's important, <code>sv-report</code> is defined as the following, but I'd like to be able to keep it the same (since <code>sv-reloadable</code> is going to be attached to many different elements, all of which <em>must</em> have <code>viewModel</code> defined on their scope)</p>
  
  <pre><code>return {
      restrict: 'E',
      replace: true,
      templateUrl: 'sv-report/sv-report.tpl.html',
      scope: {
        id: '=',
        reportParameters: '='
      },
      controller: function ($scope, svAnalytics) {
        /* unrelated code here */
      },
      link: function(scope, element, attrs) {
        initialLoadReport(scope);
      }
  };
  </code></pre>