Image not loading using AngularJS ng-repeat and ng-src directive

Question

So basically when I was using native html5 i was using five <img src=""> tags to load five images. When i wanted to use AngularJS i thought of iterating a div five times through ng-repeat and using ng-src="" get the image whose source path is stored in an array in the controller. But some how im always getting this error GET file:///home/sanad/Desktop/drag/x.source net::ERR_FILE_NOT_FOUND

This is my html:

<div ng-repeat="x in img">{{x.source}}
    <img ng-id="x.id" ng-src="x.source" >
</div>

This is my js:

var app=angular.module('d2d',[]);
app.controller('imageCtrl',function($scope){
    $scope.img=[
        {id:'table',source:'images/table.jpg'},
        {id:'paper',source:'images/paper.jpg'},
        {id:'computer',source:'images/computer.jpg'},
        {id:'ac',source:'images/ac.jpg'},
        {id:'sofa',source:'images/sofa.jpg'}
    ];
});

Answer 1

 <div  ng-repeat="x in img">
     <img ng-src="{{x.source}}" >
 </div>`

I'm not sure about what ng-src does so I did not suggested it in first place.

I also have the feeling that using a directive for doing something that html does well is not a good approach. In fact, it instantiates new scopes, new watches,...

Edit:

Using src="{{param}}" instead of ng-src="{{param}}" could lead the browser to make a call to the url http:\\yourServer\{{param}}, which would be invalid. ng-src has been created to solve that problem.