title: AngularJS controller object to directive in link
body: <p>Using angularjs, I am trying to populate a form dynamically and then submit the forms data via POST to a server.</p>
  
  <p>I created a data variable in my controller (to POST later)</p>
  
  <pre><code>$scope.data = {};
  </code></pre>
  
  <p>Then</p>
  
  <pre><code>&lt;div ng-repeat="(name, attributes) in fields"&gt;
      &lt;element myvar="data" name="{{name}}" attributes="{{attributes}}" results="{{getValue(name)}}" &gt;&lt;/element&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where fields can look something like</p>
  
  <pre><code>{"agency":{"name_displayed":"Agency","size":"30","tag":"input","type":"text"},"department":{"name_displayed":"Department","size":"30","tag":"input","type":"text"},"description":{"cols":"50","name_displayed":"Description","rows":"4","tag":"textarea"}}
  </code></pre>
  
  <p>My directive looks like this</p>
  
  <pre><code>demoApp.directive("element", function($compile) {
  
      var template = function(name, attributes, results) {
          // returns template string
          // eg. returns '&lt;input size="30" value="my agency" name="agency" ng-model="data.agency" type="text"&gt;'
      };
  
      return {
          restrict: "E",
          link: function(scope, element, attrs) {
              var attributes = angular.fromJson(attrs.attributes);
              var tpl = template(attrs.name, attributes, attrs.results);
              element.html(tpl);
              $compile(element.contents())(scope);
          }
      };
  });
  </code></pre>
  
  <p>For each new element, I would like to update the data object on the controller with the results attribute in order to populate the element.  I know how to do this using ng-model attribute if I am not setting the element's html directly.</p>
  
  <p>Any thoughts?  Can I do this inside the link?</p>