title: Dynamic tag with angularjs directive
body: <p>I would like to create an element directive in angularjs that produces an html element from a json blob passed as an attribute.  I have tried quite a few variations of the following...</p>
  
  <pre><code>demoApp.directive("element", function() {
      return {
          restrict: "E",
          scope: {
              attributes: "@",
              name: "@"
          },
          template:         
              function(name, attributes) {
                  var templateString = "&lt;" + attributes.tag;
                  for (attribute in attributes) {
                      if (attribute != "name_displayed" &amp;&amp; attribute != "tag") {
                          templateString += " " + attribute + "=\"" attributes[attribute] + "\"";
                      }
                  }
                  templateString += " name=\"" field + "\"";
                  templateString += "&gt;";
                  templateString += "&lt;/" + attributes.tag + "&gt;";
                  return attributes.name_displayed + ": " + templateString;
              }(name, attributes)
      };
  });
  </code></pre>
  
  <p>The html looks like</p>
  
  <pre><code>&lt;div ng-repeat="(name, attributes) in fields"&gt;
      &lt;element name="{[{name}]}" attributes="{[{attributes}]}"&gt;&lt;/element&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where an attributes json object looks like</p>
  
  <pre><code>{"name_displayed":"Agency","size":"30","tag":"input","type":"text"}
  </code></pre>
  
  <p>And a name looks like</p>
  
  <pre><code>agency
  </code></pre>
  
  <p>It looks like I cannot use a function for a template, and it also looks like I cannot get access to the attributes or name objects.</p>