Array index is deleting multiple times from view - AngularJS -

a bit of background: building app pulls data 2 sources (external api , own database) one. entails grabbing data external source , combining have internally each entity.

it possible have part of entities data in 1 child "div" , second part in "div". on association (by id) can joined , show 1 div. goal anyway...

question

i'm trying update index of array in child controller. index of array in fact deleted have far, it's happening multiple times.

i've created plunker here demonstrates this. if click on user 1 tab , click submit multiple times, keeps deleting , can't think of why anymore.

this main logic action (actions.js), deleting index , assigning updated entity it:

settimeout(function() {     $scope.$apply(function() {       user_tickets = $scope.$parent.$parent.$parent.tickets;       ( var status in user_tickets ) {           ( var = 0; < user_tickets[status].length; i++ ) {               if ( user_tickets[status][i].id === 10 ) {                   console.log('splicing');                   console.log(user_tickets[status][i]);                   user_tickets[status].splice(user_tickets[status].indexof(i));                   user_tickets[status][i] = { id: 10, name: 'latest issue', notes: "faking update adds 'notes' key" };               }           }       }       $scope.$parent.tickets = user_tickets;     });   }, 1000); 

your logic splicing arrays isn't going work way expect. since removing object array, array changed, , next command not operating on same array structure.

for example, if have array of 3 objects [1, 2, 3], , want remove 2 , put new record in it's place, current code does:

1. splice removes 2 array, leaving array [1, 3].
2. array[1] points object 3, using array[1] = 4 going leave array of [1, 4] (not result expecting).

instead, should loop through array , remove objects, push new object end of array data want.