Modify array in Angular does not work

Question

I am getting $scope.persons from a back end. I list it using ng-repeat.

Why will the array not be modified in my case when $scope.openDeleteModal is called?

The function is called but nothing happens to $scope.persons. Why?

application.controller('listPersonController', function ($scope, personService) {
   personService.getPersons()
  .then(function(persons) {
      $scope.persons = persons;
  });

  $scope.openDeleteModal = function (personId, firstname, lastname, index) {
    console.log("click " + $scope.persons.length);
    $scope.persons.splice();
    console.log("click " + $scope.persons.length);
  };
});

Edit:

OK I forget about splice. I use this instead

 $scope.openDeleteModal = function (personId, firstname, lastname, index) {
    console.log("click " + $scope.persons.length);
    $scope.persons = [];
    console.log("click " + $scope.persons.length);
  };

The first one logs 3. The second 0. But I do not see any changes on the scope(ng-repeat).

The HTML:

<tbody>
   <tr ng-repeat="p in persons">
      <td>{{p.firstname}}</td>
      <td>{{p.lastname}}</td>
      <td><a href="#/register_person/{{p.id}}" class="tiny button radius" >Edit</a></td>
      <td>
        <a href="#" 
           ng-click="openDeleteModal(p.id, p.firstname, p.lastname, $index)"
           class="tiny button alert radius">Delete</a>
      </td>
   </tr>  
</tbody>

The service:

personService.getPersons = function($scope){
   var promise = $http.get("rest/person").then(function (response) {
        return response.data;
   });
   return promise;
};

This is what {{persons}} just under the controller gives

[{"id":"5331c6f33004e1c8a26492a8","firstname":"Karl","lastname":"Svensson"},{"id":"5331dfdb3004e1c8a26492ad","firstname":"Jenny","lastname":"Bertilsson"},{"id":"5331ee4e3004e1c8a26492ae","firstname":"Bosse","lastname":"Gustavsson"}]

This does not change either when I modify the scope

Edit Trying to simplify stuff even more.

application.controller('listPersonController', function ($scope, personService) {

  var personsList =  [{"id":"5331dfdb3004e1c8a26492ad","firstname":"Johnny","lastname":"Bravo"}];

  $scope.persons = personsList;

  $scope.openDeleteModal = function (personId, firstname, lastname, index) {
    console.log("click " + $scope.persons.length);
    $scope.persons.length = 0;
    personsList.length = 0;
    console.log("click " + $scope.persons.length);
  };
});

Edit: The html is super simple now

<div class="row" ng-controller="listPersonController" >
    <p ng-repeat="p in persons">{{p.firstname}} <a href="#" class="tiny button alert radius" ng-click="openDeleteModal(p.id, p.firstname, p.lastname, $index)" >Delete</a></p>
</div>

Even more simple. The value of var is 3 on my page and it does not get updated on click.

application.controller('listPersonController', function ($scope, personService) {

  $scope.var = "1";

  $scope.openDeleteModal = function () {
    $scope.var = "2";
  };

   $scope.var = "3";
});

Edit: Code works as expected when moved out from ng-view. Why is this happening?

Answer 1

Remove the href="#" from the link, it's probably causing the page to navigate to itself and causing the controller to be re-instantiated.

Answer 2

The splice method is not destructive when not passed any arguments.

What that means is that while it will return the spliced (empty) array, it will not overwrite the original array.

What that means for you is that if you want to call splice to clear out the whole array, you should call:

$scope.persons = $scope.persons.splice()

Though (without referencing the javascript source) it is my belief that

$scope.persons = []

will probably be faster.

Keep in mind that this will trigger a full digest cycle, triggering every $watch and bound attribute you've defined to be hit.