title: "Error: Syntax Error unexpected token" in custom Angular Directive attributes
body: <p>I'm testing out angular &amp; trying to build a custom angular directive, but I'm running into weird console errors. </p>
  
  <p>My directive is defined as:</p>
  
  <pre><code>.directive('ipRecentActivityItem', function() {
    return {
      restrict: 'A',
      replace: true,
      transclude: true,
      scope: {
        'title': '@title',
        'icon': '@icon',
        'timeago': '@timeago',
        'meta': '@meta',
      },
      templateUrl: IP_PATH + '/app/components/recent-activity/recent-activity-item.tpl.html'
    }
  });
  </code></pre>
  
  <p>My template is:</p>
  
  <pre><code>&lt;div class="recent-activity-item"&gt;
    &lt;div class="recent-activity-content"&gt;
      &lt;div class="recent-activity-message"&gt;
        &lt;a href="" class="recent-activity-title"&gt;
          {{title}}
        &lt;/a&gt;
        &lt;div class="recent-activity-meta"&gt;
          {{meta}}
        &lt;/div&gt;
        &lt;div data-ng-transclude&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="" class="recent-activity-timeago"&gt;{{timeago}}&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then, in my view, I'm trying to call it with:</p>
  
  <pre><code>&lt;div data-ip-recent-activity-item 
    title="My Item Title" 
    icon="My item icon" 
    timeago="4 hours ago" 
    meta="someone commented on an issue in garageband"&gt;
    My Item content
  &lt;/div&gt;
  </code></pre>
  
  <p>In the rendered page, everything is showing as it should, but the console is throwing these types of errors: <code>Error: Syntax Error: Token 'Item' is an unexpected token at column 4 of the expression [My Item Title] starting at [Item Title].</code></p>
  
  <p>If I get rid of the spaces, the error goes away, but I don't understand why that is. Can anyone enlighten me? Thanks! I'm still new to the angular arena, be kind! :)</p>
  
  <p>EDIT: Forgot to mention I'm running angular version 1.1.5</p>