angularjs - Dynamically added item to ng-repeat hold duplicate model -

i 'm creating web page 'm providing option user dynamically add line items. have used angularjs framework (v 1.4.7). able achieve effect of dynamically adding item ng-repeat modal seems not unique amongst dynamically added items.

here demo code showing problem:

<div> <form novalidate class="form-vertical" ng-show="!loading" name="detailsform" ng-controller="detailsctrl">    <div ng-repeat="social in socials track $index">       <ng-form name="urlform">             <input type="email" name="socialurl" ng-model="social.email">             <span class="alert error" ng-show="urlform.socialurl.$error.email">email error</span>       </ng-form>   </div>     <a title="add" class="btn btn-success" href="javascript:void(null)" ng-click="addsocial()"><i class="fa fa-plus fa-lg"></i> add</a> </form> </div>  var myapp = angular.module('myapp', []);  myapp.controller('detailsctrl', ['$scope', function($scope) {     $scope.loading = false;     var social = {"email":""};      $scope.socials = [             { email: 'test@test.com'},         { email: 'invalid email'}];     $scope.addsocial = function(){     $scope.socials.push(social);   };      }]     ); 

i have created fiddle showing problem. in fiddle, please add new item "12345@email.com". add item "54321@email.com". notice item added @ first changed when typing in second one.

fiddle

that's because you're adding same object array , don't assign social new object. way angular keeps it's bindings.

here's fix:

$scope.addsocial = function(){     $scope.socials.push(social);     social = {"email": ""};   };