javascript - Get Nested Json With AngularJS -

i have json. how display img/n.jpg in angularjs? have multiple images under .

bb.json

{   "bb": [ {      "chapter": "1",      "images": ["img/1.jpg", "img/2.jpg"] },{      "chapter": "2",      "images": ["img/2.jpg", "img/3.jpg"] },{      "chapter": "3",      "images": ["img/3.jpg", "img/4.jpg"] }   ] } 

app.js

$http.get('js/bb.json').success(function(data){      $scope.images = data.bb;     $ionicslideboxdelegate.$getbyhandle('image-viewer').update(); }) 

templates.html

<ion-slide-box pager-click="navslide(index)" delegate-handle="image-viewer" show-pager='true' does-continue="true" on-slide-changed="slidehaschanged($index)">             <ion-slide ng-repeat="slide in images.image" >                 <div style="background: url({{slide.images}}) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; width: 100%;"></div>             </ion-slide>         </ion-slide-box> 

you should iterate through images array, , push each image newly created array, bound $scope.

for ex:

angular.module('fiddle', [])  .controller('mainctrl', function ($scope) {      var json = {         "bb": [             {                 "chapter": "1",                 "images": ["img/1.jpg", "img/2.jpg"]             }, {                 "chapter": "2",                 "images": ["img/2.jpg", "img/3.jpg"]             }, {                 "chapter": "3",                 "images": ["img/3.jpg", "img/4.jpg"]             }         ]     };      $scope.imagesarray = [];      json.bb.foreach(function (item) {         item.images.foreach(function (image) {             $scope.imagesarray.push({               src: image             });         });     })  }); 

and in template (obviously not use <p>):

    <p ng-repeat="image in imagesarray">{{ image.src }}</p> 

plunk: http://plnkr.co/edit/nf1wnf6m8rb2tvgkpgxe?p=preview