SVG animateTransform not updating on from and to value change

Question

<line x1="100" y1="100" x2="100" y2="35" stroke="white" stroke-width="4" stroke-linecap="round">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" [attr.from]="initialValue + ' 100 100'" [attr.to]="updatedValue + ' 100 100'" dur="2s" additive="sum" fill="freeze"/>
</line>

or

<line x1="100" y1="100" x2="100" y2="35" stroke="white" stroke-width="4" stroke-linecap="round">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" attr.from="{{initialValue }},100,100" attr.to="{{updatedValue }},100,100" dur="2s" additive="sum" fill="freeze"/>
</line>

in .ts file

ngOnInit() {
    this.initialValue = 0;
    this.updatedValue = 90;
}

changeCompassValue(){
    this.initialValue = this.updatedValue ;
    this.updatedValue = Math.random() * 360;
}

the above code animates the svg when it is loaded for the first time and rotates the line from 0 to 90 degrees and after that any value change to from and to values are not updating.

Can anyone spot the problem?