javascript - How to add images in angular JS -

i'm new angular js.

i have stumbled problem. using json data , not sure of how supposed add images in code

<div ng-controller="myctrl" class="container">      <div class="col-md-8">          <div ng-repeat="item in products" class="product col-md-4">              <h3>{{item.title}}</h3>             <img ng-src="{{item.image}}" alt="..." class="img-thumbnail">             <p>                 <br>                 <button type="button" ng-click="show = !show"  class="btn btn-success">view product</button>                 <button type="button" ng-click="add_to_cart()" class="btn btn-danger">add cart</button>                 <br>                 <span><b style="color: #ff0000">size: </b> {{item.size}} </span>                 <span><b style="color: #ff0000">for: </b> {{item.gender}} </span>                  <br>             </p>             <div class="description" ng-show="show">{{item.description}}</div>         </div>     </div>     <div class="col-md-4">         <div id="cart" class="col-md-12">             <div id="cart_content" class="">             <h4>cart:</h4>                 <table id="test" class="table table-striped table-bordered">                     <tr class="tr">                         <th>number</th>                         <th>title</th>                         <th>qty</th>                         <th>cost</th>                         <th>total</th>                         <th></th>                     </tr>                     <tr class="tr" ng-repeat="pro in product">                         <input type="hidden" name="somedata" ng-value="{{pro.id}}" /> {{pro.id}}                         <!-- <span style="display: none;">{{pro.id}}</span> -->                         <td>{{pro.count}}</td>                         <td>{{pro.title}}</td>                         <td>{{pro.qty}}</td>                         <td>{{pro.cost}}</td>                         <td>{{pro.total}}</td>                          <td>[<a href ng:click="removeitem($index)">x</a>]</td>                     </tr>                 </table>             </div>         </div>     </div> </div>  <script>     var app = angular.module("myapp", []);      app.controller('myctrl', ['$scope', '$http', function($scope, $http) {          $http.get('json/products.json').success(function(data) {                  $scope.products = data; // data 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);         }      }]); </script> 

you're doing right. make sure item.image points correct image source. inside products.json adjust paths.