title: AngularJS: Unable to access scope from within directive
body: <p><code>model.data</code> contains the following:</p>
  
  <pre><code>{
      "name": "Jamie",
      "age": 25
  }  
  </code></pre>
  
  <p>I have a directive that looks like:</p>
  
  <pre><code>&lt;my-directive data="model.data"&gt;&lt;/my-directive&gt;  
  </code></pre>
  
  <p>I have defined the directive as follows:  </p>
  
  <pre><code>app.directive('myDirective', function(){  
      return {
          restrict: 'E',
          scope: {
              data: '='
          },
          templateUrl: 'grid.html',
          controller: function($scope) {
              console.log($scope);
              console.log($scope.data);
          }
      }
  }
  </code></pre>
  
  <p>Problem is that <code>console.log($scope)</code> returns the value in $scope. I can see it containing data:</p>
  
  <pre><code>{
      $$asyncQueue: Array[0],
      $$childHead: null,
      ...
      ...
      data: Array[1]
  }
  </code></pre>
  
  <p>However, <code>console.log($scope.data)</code> returns <code>undefined</code>. Any clue why?</p>