title: Dynamically adding rows to a table using attribute directive in AngularJs
body: <p>I need to display a table on my HTML page. The table will contain multiple rows. On clicking the '+' icon of a row(let's call it R1), I call an attribute directive to fetch data and display it in a new row(R2) which should be added below the clicked row(R1). </p>
  
  <p>But currently, the data isn't getting displayed and I get a blank row(R2) added below the clicked row(R1). </p>
  
  <p>The code for directive is:</p>
  
  <pre><code>angular.module(
    "app", []
  ).controller(
    'Ctrl', [
      "$scope",
      function(
        $scope
      ) {
        $scope.items = {
          "first": {
            "name": "item1"
          },
          "second": {
            "name": "item2"
          },
          "third": {
            "name": "item3"
          }
        };
        $scope.showData = false;
  
      }
    ]
  ).directive(
    "expandItem", [
      function() {
        return {
          link: function($scope) {
            $scope.showRdoData = false;
  
            $scope.subitems = {
              "fir": {
                "names": "subitem1"
              },
              "sec": {
                "names": "subitem2"
              },
              "thd": {
                "names": "subitem3"
              }
            };
          },
          restrict: 'A',
          replace: false,
          template: '&lt;tr ng-repeat="row in ::subitems"&gt;' +
            '&lt;td style="background-color: red"&gt;&lt;i class="fa fa-fw fa-{{showRdoData ? \'minus\' : \'plus\'}}"&gt;&lt;/i&gt;&lt;/td&gt;' +
            '&lt;td style="background-color: blueviolet"&gt;{{::row.names}}&lt;/td&gt;&lt;/tr&gt;'
        }
      }
    ]
  );
  </code></pre>
  
  <p>Can someone help me in getting the data displayed in the table please? The code is present at <a href="https://jsfiddle.net/gb906akp/" rel="nofollow noreferrer">JSFiddle</a>. 
  Please let me know if the question isn't clear. I will try to rephrase it if needed.</p>