title: Add a div element dynamically in ng-repeat angularjs
body: <p>I am using angularjs.I am doing ng-repeat to display list of notify types and i am display in li tag.In this list three values are default.I have one Add button next to the list.If i click add button then i need to display another list with the three default values.Again add button shifts place to next.And if i click add button again then it displays another list with default values and add button shifts place and this process goes on.</p>
  
  <p>Here is the first list i am displaying with default and other values</p>
  
  <pre><code>    &lt;div class="col-xs-12 col-sm-4 col-md-4" data-ng-
      if="workboardstages.length"&gt;
      &lt;ul class="simpleDemo row"&gt;
      &lt;li data-ng-repeat="workboard in workboardstages"&gt;
      {{workboard.stageName}} 
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the add button i am placing next to the list</p>
  
  <pre><code>    &lt;div class="col-xs-12 col-sm-4 col-md-4"&gt;
      &lt;button data-ng-click="addNew()"&gt;Add New Workboard&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is how i am trying to display another list after clicking add button but i am not sure how to do it.</p>
  
  <pre><code>    &lt;div class="col-xs-12 col-sm-4 col-md-4" data-ng-show="flag"&gt;
      &lt;ul class="simpleDemo row"&gt;
      &lt;li data-ng-repeat="workboard in workboardStagesWithDefault"&gt;
      {{workboard.Name}} 
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the Controller.js</p>
  
  <pre><code>    $scope.workboardStagesWithDefault = [
      {
          Name:"New"
      },
      {
          Name:"Won"
      },
      {
          Name:"Lost"
      }
      ];
      $scope.flag=false;
  
       $scope.addNew = function(){
             $scope.flag=true;
          };
  
      $scope.getAllWorkboardStages = function(){
      AccountSettingService.getAllWorkboardStages().then(function(response){
          $scope.workboardstages = response.data;
      });
      }
  </code></pre>
  
  <p>Here after clicking add button i am displaying another list with default values "New","Won" and "Lost" but if i click another time add value it is not adding list again.I want to add lists whenever i click add button.But now it is adding only once.Can anyone tell how to keep adding the div list when add is clicked?</p>