文本编辑器未显示在使用JavaScript添加更多功能中

Question

I am creating Add More fields functionality in angularjs. In that, I am implementing "what you see what you get" text editor. The HTML code works. When page loads, page displays the text editor with other input fields but when I add more div by clicking on button, other input field displays but the text editor does not display. Below is my code.

HTML:

        <script src='http://textangular.com/dist/textAngular-rangy.min.js'></script>
        <script src='http://textangular.com/dist/textAngular-sanitize.min.js'></script>
        <script src='http://textangular.com/dist/textAngular.min.js'></script> 

       <style>
       .ta-editor { min-height: 300px; height: auto; overflow: auto; font-family: inherit;
                    font-size: 100%; } 
       </style>

    <div id="innerDiv">
      <div class="form-group" >
        <input type="text">     
        <div text-angular="text-angular" ng-model="user.description" ta-disabled='disabled'></div>
      </div>
   </div>
   <input type="button" onclick="addMore();" ng-click="addMore(dynamicInput)" value="+ Add Another Goal" class="drag_but" />

javascript

<script>
    function addMore(){               
              var newdiv = document.createElement('div');
              newdiv.innerHTML = '<div id="innerDiv">----Same Content with text editor---'; 
   <script>

app.js:

angular.module('appName', ['textAngular']);

Answer 1

Use a more angular approach. Use a ng-repeater that loops through the number of inputs you want.

addMore() should then increment the number of inputs you want

Try this: http://www.bootply.com/tH0v5UGZR7