Unable to fetch angular controller’s data into HTML

I am using Angular 1.6.
I am trying to fetch x and y positions for an SVG element from a component controller.

this.painterModel = [];
var imageRef = {};
imageRef.path='assets/images/sample.png';
imageRef.xPos = 100;
imageRef.yPos = 100;
this.painterModel.push(imageRef);

Currently, the list has only one element. The HTML looks like this.

<svg id="frontView" width="1000" height="1000">
            <image ng-repeat="x in $ctrl.painterModel" href="x.path" x="x.xPos" y="x.yPos" />
</svg>

I always get this error in the console that says,

app.js:9756 Error: <image> attribute x: Expected length, "x.xPos".
app.js:9756 Error: <image> attribute y: Expected length, "x.yPos".

What am I doing wrong?

Source: AngularJS