How to add images in angular JS
<p>I'm new to angular js. </p>

<p>I have stumbled into a problem. I am using a json for my data and not sure of how am I supposed to add the images in my code</p>

<pre><code>&lt;div ng-controller="myCtrl" class="container"&gt;

    &lt;div class="col-md-8"&gt;

        &lt;div ng-repeat="item in products" class="product col-md-4"&gt;

            &lt;h3&gt;{{item.title}}&lt;/h3&gt;
            &lt;img ng-src="{{item.Image}}" alt="..." class="img-thumbnail"&gt;
            &lt;p&gt;
                &lt;br&gt;
                &lt;button type="button" ng-click="show = !show"  class="btn btn-success"&gt;View Product&lt;/button&gt;
                &lt;button type="button" ng-click="add_to_cart()" class="btn btn-danger"&gt;Add To Cart&lt;/button&gt;
                &lt;br&gt;
                &lt;span&gt;&lt;b style="color: #ff0000"&gt;Size: &lt;/b&gt; {{item.Size}} &lt;/span&gt;
                &lt;span&gt;&lt;b style="color: #ff0000"&gt;for: &lt;/b&gt; {{item.Gender}} &lt;/span&gt; 
                &lt;br&gt;
            &lt;/p&gt;
            &lt;div class="description" ng-show="show"&gt;{{item.description}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;div id="cart" class="col-md-12"&gt;
            &lt;div id="cart_content" class=""&gt;
            &lt;h4&gt;Cart:&lt;/h4&gt;
                &lt;table id="test" class="table table-striped table-bordered"&gt;
                    &lt;tr class="tr"&gt;
                        &lt;th&gt;Number&lt;/th&gt;
                        &lt;th&gt;Title&lt;/th&gt;
                        &lt;th&gt;Qty&lt;/th&gt;
                        &lt;th&gt;Cost&lt;/th&gt;
                        &lt;th&gt;Total&lt;/th&gt;
                        &lt;th&gt;&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;tr class="tr" ng-repeat="pro in product"&gt;
                        &lt;input type="hidden" name="someData" ng-value="{{pro.id}}" /&gt; {{pro.id}}
                        &lt;!-- &lt;span style="display: none;"&gt;{{pro.id}}&lt;/span&gt; --&gt;
                        &lt;td&gt;{{pro.count}}&lt;/td&gt;
                        &lt;td&gt;{{pro.title}}&lt;/td&gt;
                        &lt;td&gt;{{pro.qty}}&lt;/td&gt;
                        &lt;td&gt;{{pro.cost}}&lt;/td&gt;
                        &lt;td&gt;{{pro.total}}&lt;/td&gt;

                        &lt;td&gt;[&lt;a href ng:click="removeItem($index)"&gt;X&lt;/a&gt;]&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    var app = angular.module("myApp", []);

    app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {

        $http.get('json/products.json').success(function(data) {

                $scope.products = data; // get data from json       
        });

        var total = 0;
        var counter = 0;
        $scope.product = [];

        $scope.add_to_cart = function(){

            counter++;

            total = parseInt(total) + parseInt(this.item.price);

            $scope.product.push({
                id: this.item.id,
                qty: 1,
                title: this.item.title,
                cost: this.item.price,  
                total: total,
                count: counter
            });         
        }

        $scope.removeItem = function(index) {
            $scope.product.splice(index, 1);
        }

    }]);
&lt;/script&gt;
</code></pre>