How can I add my own animation to each path element?

Question

SVG

Good day. There was such problem:
I write small application on Angular. I receive data from the server, and based on them I build an image. In general, it consists of the same lines, which are animated when they appear.

<svg style="position: absolute; top: 0; left: 0;" ng-repeat="historyLine in historyLines" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                 x="0px" y="0px" viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
                                <path  transform='rotate({{historyLine.peleng}}, 600, 600)' data-animate='0' id='history_line{{historyLine.id}}' fill='none' stroke='#030406' stroke-dasharray='300 300'
                                      stroke-opacity="0.3" stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'
                                                    d='M 600 235 L 600 0'>
 
                                </path>
                                <animate attributeName="stroke-dashoffset" from="300" to="0" begin="0" dur="2s" fill="freeze"/>
 
                            </svg>

It's simple, every time a command comes from the server to display a new line, I create a copy of the SVG object (), and add additional information instead of {{historyLine.peleng}} and {{historyLine.id}}. Everything works, but since I don't need to create an SVG object every time, I tried to constantly repeat the path. And then a problem arose:
The fact is that the path is animated when it appears. and if you just repeat the path without creating an SVG object, then only the first line that appears is animated. The rest that came later appear as if the animation has already passed, despite the fact that they are not in the DOM yet.
In general, how to create a new path and animation to it.