Passing literal attribute values to angular js directive

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 `undefined` when I try to use them within the directive controller. Say in my HTML I envoke a directive like this: ``` <div ng-controller="MyCtrl"> <my-directive reference-attr='referenceVal' literal-attr='literalVal'></my-directive> </div> ``` `referenceVal` and `literalVal` are both defined in my controller, like this: ``` 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'; } ``` And I try to pick them up in my directive: ``` myApp.directive("myDirective", function () { return { restrict: "E", replace: true, scope: { referenceAttr: "=", literalAttr: "@" }, template: '<div><p>Reference:{{referenceAttr}}</p><p>Literal:{{literalAttr}}</p></div>', controller: function ($scope) { alert("ref: " + $scope.referenceAttr + ", lit: " + $scope.literalAttr); } }; }); ``` The output looks fine: ``` Reference: This was passed by reference Literal: literalVal ``` But the alert message is crap: ``` ref: This was passed by reference, lit: undefined ``` You can try it out yourself with this JSFiddle Any idea why `literalAttr` is undefined in the directive scope at this point?