title: Non-string types in AngularJS directive attributes
body: <p>I want to create a properties pane, where the number of properties can vary depending on which object is selected.</p>
  
  <p>I have created by own directive called <code>property</code> that displays the name and the value of a property, using code like this:</p>
  
  <pre><code>&lt;div ng-app="MyApp"&gt;
    &lt;div class="properties-pane" ng-controller="PropertiesPane"&gt;
      &lt;div ng-repeat="property in properties"&gt;
        &lt;property name="{{property.name}}" value="{{property.value}}"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Simple, isn't it? This works just fine, except that <code>property.value</code> will be converted to a string (as it's an attribute on a DOM element). What am I to do if the property value is some other data type? For example an object. See the rest of the implementation (in Coffeescript):</p>
  
  <pre><code>MyApp = angular.module('MyApp', [])
  
  MyApp.controller 'PropertiesPane', ($scope) -&gt;
    $scope.properties = [
      # Note that value is an object, not a string:
      {name: 'First', value: {x:0, y:0, z:42}},
      {name: 'Second', value: {x:0, y:20, z:0}},
      {name: 'Third', value: {x:1, y:1, z:1}},
    ]
  
  MyApp.directive 'property', ($compile) -&gt;
    restrict: 'E'
    transclude: false
    replace: true
    scope: {name: '@name', value: '@value'}
    template: '&lt;div&gt;{{name}} {{value.x}}, {{value.y}}, {{value.z}}&lt;/div&gt;'
    #                          ^^^^^^^      ^^^^^^^      ^^^^^^^
    #   this doesn't work as value is a string, not an object
  </code></pre>
  
  <p>As value.x, y and z are undefined on a string, the result is of course:</p>
  
  <p>First , ,<br>
  Second , ,<br>
  Third , ,  </p>
  
  <p>The output I want is:</p>
  
  <p>First 0, 0, 42<br>
  Second 0, 20, 0<br>
  Third 1, 1, 1  </p>
  
  <p>I suspect there's something fundamentally wrong in my thinking of how to programatically add elements. What's the Angularish way to implement something like this?</p>
  
  <p><strong>EDIT: Solution</strong></p>
  
  <p>To refer to <code>value</code> as an object by reference instead of as a string value, use <code>=</code> instead of <code>@</code> in the directive:</p>
  
  <pre><code>scope: {name: '@', value: '='}
  </code></pre>
  
  <p>And in the template:</p>
  
  <pre><code>&lt;property name="{{property.name}}" value="property.value"&gt;
  </code></pre>
  
  <p>Note that I removed the <code>{{}}</code>.</p>