javascript - Create property editor with multiple fields added dynamically in Umbraco -

i created own plugin, small one, simple 1 contains 1 input , 2 buttons: add & remove.

when press add button new input insert below (also add&remove button beside input)

when press remove button input removed.

i have 2 problems:

1. when add new field, when type text, changes inputs. don't want that. somehow inputs values binding between them. how fix ? want type different text in different inputs.

2. when save , publish content, umbraco save first input, no matter how many inputs created. mistake ?

so package.manifest

{     propertyeditors: [         {                 alias: "multiplelist",                 name: "multiple list",                 editor: {                 view: "~/app_plugins/multiplelist/multiplelist.html"                 },                 prevalues: {                         fields: [                          ]                 }         }     ],     javascript: [         "~/app_plugins/multiplelist/multiplelist.controller.js"     ] } 

my html file:

<div ng-controller="multiplelist" class="umb-editor list-items">     <div ng-repeat="item in list">        <input type="text" name="list-item" placeholder="name" ng-model="model.value" class="multiple-list" value="{{item.value}}" />        <a href="javascript:void(0)" class="btn btn-default add-new-icon" ng-click="add()"><i class="fa fa-plus" aria-hidden="true"></i></a>        <a href="javascript:void(0)" class="btn btn-danger remove-icon {{item.disabled}}" ng-click="remove({{item.index}})"><i class="fa fa-minus" aria-hidden="true"></i></a>     </div> </div> 

my angularjs controller:

var umbracomodule = angular.module("umbraco");  umbracomodule.controller("multiplelist",    function ($scope) {       $scope.index = 0;        $scope.$watch("list", function () {          settimeout(function () {             var changes = $scope.list;             if (!changes) {                return;             }              if (changes.length === 1) {                $(".list-items").find(".remove-icon").addclass("disabled");             } else {                $(".list-items").find(".remove-icon").removeclass("disabled");             }          }, 20);       }, true);        $scope.add = function () {          $scope.index++;          $scope.list.push({ index: $scope.index, disabled: $scope.list.length > 1 ? "disabled" : "", value: "" });       }        $scope.list = [];       $scope.list.push({ index: $scope.index, disabled: "", value: "" });        $scope.remove = function (id) {          if ($scope.list.length === 1) {             return;          }           var goodlist = [];          $scope.list.foreach(function (v, k) {             if (v.index !== id) {                goodlist.push(v);             }          });           $scope.list = goodlist;          $scope.index--;       }    });  umbracomodule.directive('multiplelist', function (assetsservice) {    return {       restrict: 'c', //matches class 'multiple-list'       link: function (scope, el, attrs) {          var plugin_path = "/app_plugins/multiplelist";          assetsservice.loadcss(plugin_path + '/multiplelist.css?c=8');       }    }; });