Ng-src not working for locally stored image

Question

I'm trying something in angularjs. This is the controller I made:

function ImagesController($scope){
    $scope.count = 0;
    $scope.imags = [
        {
            image1: 'images/levels/level1/sky.jpg',
            image2: 'images/levels/level1/rain.jpg',
            image3: 'images/levels/level1/sky.jpg'
        },
        {
            image1: 'images/levels/level2/x.jpg',
            image2: 'images/levels/level2/y.jpg',
            image3: 'images/levels/level2/z.jpg'
        }
    ];
  }

And this is the HTML linking to this controller:

<div ng-controller="ImagesController">
      Random Writing
        <img ng-src="$scope.imags[0].image1">
 </div>

I don't know why the image that I'm trying to display is not working. I have added ng-app to the tag already so that can't be the issue.

Answer 1

I belive you should write

   <img ng-src="{{imags[0].image1}}>

Link to the directives documentation