title: Passing literal attribute values to angular js directive
body: <p>I'm having a bit of trouble understanding how attribute values work in AngularJS directives. No matter what I try, literal attribute values come out as <code>undefined</code> when I try to use them within the directive controller. </p>
  
  <p>Say in my HTML I envoke a directive like this:</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      &lt;my-directive reference-attr='referenceVal' literal-attr='literalVal'&gt;&lt;/my-directive&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>referenceVal</code> and <code>literalVal</code> are both defined in my controller, like this:</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  function MyCtrl($scope) {
      $scope.referenceVal = 'This was passed by reference';
      $scope.literalVal = 'This was also passed by reference, but should have been literal';
  }
  </code></pre>
  
  <p>And I try to pick them up in my directive:</p>
  
  <pre><code>myApp.directive("myDirective", function () {
  
      return {
          restrict: "E",
          replace: true,
          scope: {
              referenceAttr: "=",
              literalAttr: "@"
          },
          template: '&lt;div&gt;&lt;p&gt;Reference:{{referenceAttr}}&lt;/p&gt;&lt;p&gt;Literal:{{literalAttr}}&lt;/p&gt;&lt;/div&gt;',
          controller: function ($scope) {
              alert("ref: " + $scope.referenceAttr + ", lit: " + $scope.literalAttr);
          }
      };
  });
  </code></pre>
  
  <p>The output looks fine:</p>
  
  <pre><code>Reference: This was passed by reference
  Literal: literalVal
  </code></pre>
  
  <p>But the alert message is crap:</p>
  
  <pre><code>ref: This was passed by reference, lit: undefined
  </code></pre>
  
  <p>You can try it out yourself with <a href="http://jsfiddle.net/HB7LU/1883/" rel="nofollow">this JSFiddle</a></p>
  
  <p>Any idea why <code>literalAttr</code> is undefined in the directive scope at this point?</p>