javascript - How to add additional form fields using angularjs? -

i have researched online on how create additional form field. method using comes site.

http://mrngoitall.net/blog/2013/10/02/adding-form-fields-dynamically-in-angularjs/

so trying do, have data inputted in. don't know how many data points person put in. enable can let them put additional points if wish.

i have in tag:

  <script>   function angularctrl($scope) {   function controller($scope) {     $scope.master = {};      $scope.update = function(user) {       $scope.master = angular.copy(user);     };      $scope.reset = function() {       $scope.user = angular.copy($scope.master);     };      $scope.reset();   }  $scope.choices = [{id: 'choice1'}];   $scope.addnewchoice = function() {     var newitemno = $scope.choices.length+1;     $scope.choices.push({'id':'choice'+newitemno}); };   $scope.showaddchoice = function(choice) {     return choice.id === $scope.choices[$scope.choices.length-1].id; };    $scope.showchoicelabel = function (choice) {     return choice.id === $scope.choices[0].id; }    } </script> 

i have in tag:

<div class="form-group" ng-controller="controller" data-ng-repeat="choice in choices">   <form novalidate class="simple-form">         title of chart: <input type="text" ng-model="chart.title" /><br />         series name: <input type="text" ng-model="chart.series" /><br />         series data: <input type="text" ng-model="series.data" /><br>          <label for="choice" ng-show="showchoicelabel(choice)">choices</label>         <button ng-show="showaddchoice(choice)" ng-          click="addnewchoice()">add choice</button>         <input type="text" ng-model="choice.name" name="" placeholder="enter          new data point">                  <br>         <button ng-click="reset()">reset</button>         <button ng-click="update(user)">save</button>   </form> </div> 

so can see, have 4 form fields. want choices add new form field. have button, when click button add form field; not work. stays same.

i wondering if have in tags off bit.

thank help. been struggling on hours.

to expand on comment:

directive html:

<label for="choice" ng-show="showchoicelabel(choice)">choices</label> <input type="text" ng-model="choice.name" name="" placeholder="enter new data point" />          <br> <button ng-click="reset()">reset</button> <button ng-click="update(user)">save</button> 

primary content:

<div class="form-group" ng-controller="controller">   <form novalidate class="simple-form">     title of chart: <input type="text" ng-model="chart.title" /><br />     series name: <input type="text" ng-model="chart.series" /><br />     series data: <input type="text" ng-model="series.data" /><br>     <button ng-show="showaddchoice(choice)" ng-click="addnewchoice()">add choice</button>      <div choice-editor ng-repeat="c in choices" choice="c"></div>  </form> 

i'm fuzzy on best practices directives. seems mix single directive sometimes, i.e., i'm not sure if want ng-repeat , choice attributes on same element... maybe else can improve answer. should give ideas of how proceed, hopefully.