title: exposing an object in angularjs directive scope, can't access properties
body: <p>So, I have the following relatively simple Angularjs directive</p>
  
  <pre><code>app.directive('myDirective', function () {
        return {
            restrict: 'E',
            scope: {
                site: '@',
                index: '@'
            },
            template: '&lt;div&gt;{{site}}&lt;/div&gt;',
            replace: true,
  
        }
    });
  </code></pre>
  
  <p>And here is where I call the directive in HTML</p>
  
  <pre><code>&lt;div id="eventGraphic" class="span12"&gt;
      &lt;my-directive ng-repeat="site in IEvent.sites" site="{{site}}" index="{{$index}}"&gt;&lt;/my-directive&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which, given that each <code>site</code> is an object, produces this output (copied from browser)</p>
  
  <pre><code>{"name":"Hurlburt","_id":"5148bb6b79353be406000005","enclaves":[]}
  {"name":"Walker Center","_id":"5148cca5436905781a000005","enclaves":[]}
  {"name":"test1","_id":"5148ce94436905781a000006","enclaves":[]}
  {"name":"JDIF","_id":"5148cf37436905781a000007","enclaves":[]} 
  </code></pre>
  
  <p>However, if I change the template in the directive to</p>
  
  <pre><code> template: '&lt;div&gt;{{site.name}}&lt;/div&gt;',
  </code></pre>
  
  <p>it does not produce any output.  This seems like a fairly straightforward use case, any ideas what I could be doing wrong?  The desired output would be just the <code>name</code> field in each object.</p>