IndexOf Deletes The Wrong Item In AngularJS

I am building a note taking application (something like a blog actually with different terms like post=note etc.) to practise my skills in AngularJS and Rails. There is a sidebar

Solution 1:

We went to the bottom of this in the chat. And the problem probably had to do with note not referencing an object in ShareNoteScope.getScope().notes. So to get a correct reference, we used filter in this case:

JavaScript

$scope.destroy = function(note) { 
    Note.remove({id: note.id}, function() { 
        var res = ShareNoteScope.getScope().notes.filter(function(el){ 
            return el.id == note.id; 
        }); 
        note = res[0]; 
        var index = ShareNoteScope.getScope().notes.indexOf(note); 
        console.log(index); 
        ShareNoteScope.getScope().notes.splice(index, 1); 
    }); 
    $location.path('/notes'); 
}

Solution 2:

Pass $index in destroy method along with note object

<div class="row">
    <div class="col-lg-10">
        <h3>{{ note.title }}</h3>
    </div>
    <div class="col-lg-2">
        <button type="button" ng-click="destroy(note,$index)" class="btn btn-default btn-xs pull-right">
            <span class="glyphicon glyphicon-remove"></span></button>
    </div>
</div>
<hr/>
<div class="note-description">
    {{ note.description }}
    <br>
</div>


  $scope.destroy = function(note, $index) {
    Note.remove({id: note.id}, function() {
      ShareNoteScope.getScope().notes.splice($index, 1);
    });
    $location.path('/notes');
  }

Try this