Passing image path via angularJs controller to HTML

I am trying to pass the image path to HTML page via angularJS controller in ASP.NET MVC project. The image stored in "contents/images" folder in the project. I am getting 404 (Not Found) Error. I am using IIS express. Below is the code

HTML

    <div class="carousel-inner" role="listbox" >
        <div data-ng-repeat="img in mainCtrl.images">
            <div class="item">
                <img src={{img.path}} alt={{img.name}} class="banner">
            </div>
        </div>
      </div>

Angular Controller

(function () {
    'use strict';

    angular
    .module('TestApp')
    .controller('mainCtrl', mainCtrl);

    mainCtrl.$inject = ['$scope'];

    function mainCtrl($scope) {
        $scope.images = 
            [
                { path: '..\Contents\images\banner\banner1.jpg', name:'banner1', item:"item active" },
                { path: '..\Contents\images\banner\banner2.jpg', name:'banner2', item:"item"},
                { path: '..\Contents\images\banner\banner3.jpg', name:'banner3', item:"item"}
            ]

    }

})();

It is trying to look for the images at http://testApp/Contents/images/banner/banner1.jpg

What is the correct way of passing the path of the image which is still going to work even after I published to IIS Server

-Alan-