angularjs - How to pull image from json to html in angular js without using rest? -

i want pull image json database show in image slider. json is:-

{ "items" : [ { "img": "img/product1.jpg", "alt" : "image 1" }, { "img": "img/product2.jpg", "alt" : "image 2" }, { "img": "img/product3.jpg", "alt" : "image 3" }, { "img": "img/product4.jpg", "alt" : "image 4" }, { "img": "img/product5.jpg", "alt" : "image 5" }, { "img": "img/product6.jpg", "alt" : "image 6" } ] }

html:-

<div id="image_slider" class="img_slider">      <img src={{items}} /> </div> 

css:- #image_slider .item{ padding: 30px 0px; background: #a1def8; display: block; margin: 5px; color: #fff; border-radius: 3px; text-align: center; }

controller:- jquery code.i want convert code in angularjs.i new angular.so can me in this?

//$scope.document.ready(function($scope) {  app.directive('image_slide', function($scope) {       $scope.document.ready(function($scope) {   ("#image_slider").img_slider({     jsonpath : 'data/imageslider.json',     jsonsuccess : customdatasuccess   });    function customdatasuccess(data){     var content = "";     for(var in data["items"]){         var imgs = data["items"][i].imgs;        //var alt = data["items"][i].alt;         content += "<img src=" + "" +imgs+ "/>";       /* <img src="img/product1.jpg"/>*/     }     $("#image_slider").html(content);   } }); 

});

the concepts need use here $http , ng-repeat.

for example, you'd fetch data this:

$http.get('data/imageslider.json')   .success(function(data, status, headers, config) {     $scope.images = data.items;   }); 

and you'd display this:

<img ng-repeat="image in images" ng-src="{{image.img}}" alt="{{image.alt}}" /> 

here's full example on plunker.