Директива angularjs отличается от привязки к массиву

В то время как angular.forEach возвращает только последнее значение из personList. Как для каждого объекта в personList показать информацию с созданным directive?

I need exactly solution in forEach loop.

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

app.controller('MyController', function ($scope, $compile) {
        var personList = [
            { name: "John", age: "20" }, 
            { name: "Peter", age: "25" } 
        ];

        angular.forEach(personList, function(p, i) {
            $scope.person = { name: personList[i].name, age: personList[i].age };
            var personInfo = ($compile)('<person-info></person-info>')($scope);
            var body = document.querySelector("body")
            var parentDiv = document.createElement("div");


            body.append(parentDiv);
            parentDiv.append(personInfo[0]);
        });
    });

app.directive("personInfo", function () {
    return { template: '{{ person.name }} is {{person.age}} years old' }
});

В HTML:

Peter is 25 years old
Peter is 25 years old