title: How to bind using ng-model from a custom directive to the view? - AngularJS
body: <p>I am trying to develop an application using angular JS. I have created a custom directive from which I am trying to display values into a table. All this is working fine. I am unable to bind the values that I enter in the Textboxes dynamically. Below are my HTML and JavaScript codes. Please help me out. Thanks in advance.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  </code></pre>
  
  <p></p>
  
  
  
  
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;button ng-click="funJSON()"&gt;Test&lt;/button&gt;
  &lt;table&gt;
      &lt;tbody ng-repeat="field in fields"&gt;
          &lt;tr my-dir name="{{name}}" attributes="{{attributes}}"
              ng-repeat="(name, attributes) in field"&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;!-- I'm trying to bind the values here dynamically. --&gt;
  &lt;p&gt;{{test1}} {{test2}}&lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var mod = angular.module('myApp', []);
  
  mod.directive('myDir', function() {
  
  var template = function(name, attributes) {
  
      var tempStr = "&lt;tr&gt;";
      var iteration = 1;
      for ( var column in attributes.column) {
  
          {
              tempStr += "&lt;td&gt;" + attributes.column[column].label
                      + " : &lt;/td&gt;";
  
              tempStr += "&lt;td&gt;";
              tempStr += "&lt;" + attributes.column[column].tag;
              for ( var attribute in attributes.column[column]) {
                  if (attribute != "label" &amp;&amp; attribute != "tag") {
                      tempStr += " " + attribute + '="'
                              + attributes.column[column][attribute] + '"';
                  }
              }
              tempStr += ' name="' + name + '"';
  
              tempStr += " ng-model=\"test" + attributes.column[column].ng
                      + "\"&gt;";
  
              // alert(tempStr);
  
              tempStr += "&lt;/" + attributes.column[column].tag + "&gt;&lt;/td&gt;";
  
              // alert(tempStr);
          }
  
          iteration++;
      }
      tempStr += "&lt;/tr&gt;";
      return tempStr;
  };
  
  return {
      restrict : "AE",
      link : function(scope, element, attrs) {
          var attributes = angular.fromJson(attrs.attributes);
          var html = template(attrs.name, attributes);
          element.html(html);
      }
  };
  
  
  mod.controller('myCtrl', function($scope) {
  
  $scope.funJSON = function() {
  
      data = {
          "row" : [ {
              "column" : [ {
                  "size" : 20,
                  "label" : "First Name",
                  "type" : "text",
                  "tag" : "input",
                  "ng" : "1"
              }, {
                  "size" : 20,
                  "label" : "Last Name",
                  "type" : "text",
                  "tag" : "input",
                  "ng" : "2"
              } ],
              "id" : 1
          } ]
      };
      $scope.fields = data;
  
  };
  </code></pre>
  
  <p>});</p>