My mistake

HTML

<div ng-controller="myCtrl">
    <person ng-repeat="person in peopleIds" person="person"></person>
</div>

JavaScript

var app = angular.module('myApp', []);

function myCtrl($scope, People) {
    $scope.people = People.people;
    $scope.peopleIds = People.peopleIds;
}

app.directive('person', function (People) {
    return {
        template: '<div>Name: {{people[person].name}} - <button ng-click="removePerson()">Delete</div></div>',
      restrict: 'E',
      scope: {
        person: '=person'
      },
      link: function (scope, element, attrs) {
          scope.people = People.people;
          scope.removePerson = function()
          {
              People.removePerson(scope.person);
          }
      }
    }
  })
    
app.service('People', function People() {
    this.peopleIds = [0, 1];
    
    this.people = {
            0: {
                'name': 'test'
            },
            1: {
                'name': 'test2'
            }
        };
    
    this.removePerson = function(personId) {
        delete this.peopleIds[this.peopleIds.indexOf(personId)];
        delete this.people[personId];
    }
})