title: create a dynamic expandable table by using angularjs and jquery
body: <p>I'd like to create an expandable table by using JQuery: <a href="http://ludo.cubicphuse.nl/jquery-treetable/#examples" rel="nofollow noreferrer">http://ludo.cubicphuse.nl/jquery-treetable/#examples</a>.</p>
  
  <p>The issue is that there is a conflict between angularjs and jquery. This is my html file:</p>
  
  <pre><code>&lt;table&gt;
     &lt;tbody ng-repeat="row in construct.matrix.rows"&gt;
        &lt;tr data-tt-id="row.name"&gt;
           &lt;td&gt;{{row.name}}&lt;/td&gt;
           &lt;td&gt;
              &lt;button ng-click="newField($index)"&gt;Add a Field&lt;/button&gt;
              &lt;form ng-submit="addField($index, fieldName, row)" ng-if="choose($index)"&gt;
                 &lt;input type="text" ng-model="fieldName" name="text" placeholder="New Field" /&gt;
              &lt;/form&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>To use the jquery part i use this tag :</p>
  
  <pre><code>$(document).ready(function() {
     initialize();
  });
  
  function initialize() {
     $("table").agikiTreeTable({
        persist : false,
        persistStoreName : "files"
     });
  }
  </code></pre>
  
  <p>I'd like to have a simple table at the beginning with only one row. On this row, the user can click on a button and then submit a new row which will be an expandable row from the first one. Just to see if it was possible, I tried to do so but I understood that I had to recall the initialize function after submitting the first expandable row. And it works, but if I want to do the operation again I have some conflicts. </p>
  
  <p>Look at this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/Xxsvo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xxsvo.png" alt="conflict when I redo the operation"></a></p>
  
  <p>So if anyone has an idea to fix this, I will be glad to hear it. Thanks</p>