title: Issue in AngularJS ng-repeat while accessing image
body: <p>I'm writing a small program for "add to cart" page using AngularJS, the part of HTML code is as follows:</p>
  
  <pre><code>&lt;div id="bookListWrapper" ng-controller="BookListCtrl"&gt;
              &lt;form role="form"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Search here..."&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              &lt;div&gt;
                  &lt;ul class="list-unstyled"&gt;
                      &lt;li class="book" style="background: white no-repeat" ng-repeat="book in books"&gt;
                          &lt;div class="cover-image"&gt;
                              &lt;img src={{book.imgUrl}}&gt;
                              &lt;!--I've tried src="../img/{{book.imgUrl}}" also--&gt;
                          &lt;/div&gt;
                          &lt;div class="book-details clearfix"&gt;
                              &lt;h3&gt;{{book.name}}&lt;/h3&gt;
                              &lt;p&gt;{{book.price}}&lt;/p&gt;
                              &lt;ul class="list-unstyled list-inline"&gt;
                                  &lt;li&gt;rating: {{book.rating}}&lt;/li&gt;
                                  &lt;li&gt;Binding: {{book.binding}}&lt;/li&gt;
                                  &lt;li&gt;Publisher: {{book.publisher}}&lt;/li&gt;
                                  &lt;li&gt;Released: {{book.releaseDate}}&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;p&gt;Frodo, the young hobbit is playing around the neighborhood...&lt;/p&gt;
                              &lt;button class="btn btn-info pull-right" ng-click="addToKart(book)"&gt;Add to Kart&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The JS file is as follows:</p>
  
  <pre><code>var BookListCtrl = function ($scope) {
      $scope.books = [
          {
              imgUrl: "../img/lotr1.jpg",
              name: "Lord of The Rings I",
              price: 786,
              rating: 4.5,
              binding: "paperback",
              publisher: "NYpublisher",
              releaseDate: "19th July 1956",
              details: "Story of a young hobbit named Frodo, A tale of his adventures"
          },
          {
              imgUrl: "../img/lotr2.jpg",
              name: "Lord of The Rings II",
              price: 786,
              rating: 4.4,
              binding: "paperback",
              publisher: "NYpublisher",
              releaseDate: "19th July 1956",
              details: "Story of a young hobbit named Frodo, A tale of his adventures"
          },
          {
              imgUrl: "../img/lotr3.jpg",
              name: "Lord of The Rings III",
              price: 786,
              rating: 4.6,
              binding: "paperback",
              publisher: "NYpublisher",
              releaseDate: "19th July 1956",
              details: "Story of a young hobbit named Frodo, A tale of his adventures"
          }
      ];
      $scope.addToKart = function (book) {
          console.log("add to kart:body");
      }
  }
  </code></pre>
  
  <p><strong>Although the code works just fine and shows all the images for all the items of array</strong>, But there's a console error which says:</p>
  
  <pre><code>GET file:///C:/Courses/Udemy/AngularJS/html/%7B%7Bbook.imgUrl%7D%7D net::ERR_FILE_NOT_FOUND
  </code></pre>
  
  <p>The code directory is in the folder given in error(/C:/Courses/Udemy/AngularJS/html) whereas from JS file, it should Actually search for image in the "C:/Courses/Udemy/AngularJS/img" folder</p>