How to display nested loop in html page using AngularJS?

Question

I have JSON data I dont know how to write nested loop in angularJS.In here I am using two $index one is parent and anothe one is for child but its not working to me.

In here priceTag is a nested array.But i cant able to acces this nested array.Please help me to getting this .I am new in angularJS

This is my JSON data

$scope.products=
[
     {
      "catId": "569df86dd08598371e9b5ad8",
      "pname": "ABCD",
      "priceTag": [
           {
                "pModel": "50gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           },
           {
                "pModel": "150gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           }
      ],
      "id": "569e0abed08598371ebe5421",
      "createdOn": "19-Jan-2016 09:29:26 UTC"         
     },
     {
      "catId": "569df86dd08598371e9b5ad8",
      "pname": "BACD",
      "priceTag": [
           {
                "pModel": "50gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           },
           {
                "pModel": "150gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           }
      ],
      "id": "569e0abed08598371ebe5423",
      "createdOn": "19-Jan-2016 09:29:26 UTC"         
     },
     {
      "catId": "569df86dd08598371e9b5ad8",
      "pname": "CABD",
      "priceTag": [
           {
                "pModel": "25gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           },
           {
                "pModel": "150gm",
                "actualPrice": "23",
                "offer": 0,
                "availablity": "3"
           }
      ],
      "id": "569e0abed08598371ebe5424",
      "createdOn": "19-Jan-2016 09:29:26 UTC"         
     },
]

This is my index.html

<div ng-repeat="product in products">
{{$index+1}} &nbsp;{{product.pname}}

    <div ng-repeat="ptag in product.priceTag track by $index">
    {{$index}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}   
    </div>

</div>

Answer 1

Here is simple example HOPE it helps in your question but next time give some error message.

angular.module('tt', []).controller('TTTT', function($scope) {
  $scope.products = [{
    "catId": "569df86dd08598371e9b5ad8",
    "pname": "ABCD",
    "priceTag": [{
      "pModel": "50gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }, {
      "pModel": "150gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }],
    "id": "569e0abed08598371ebe5421",
    "createdOn": "19-Jan-2016 09:29:26 UTC"
  }, {
    "catId": "569df86dd08598371e9b5ad8",
    "pname": "BACD",
    "priceTag": [{
      "pModel": "50gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }, {
      "pModel": "150gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }],
    "id": "569e0abed08598371ebe5423",
    "createdOn": "19-Jan-2016 09:29:26 UTC"
  }, {
    "catId": "569df86dd08598371e9b5ad8",
    "pname": "CABD",
    "priceTag": [{
      "pModel": "25gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }, {
      "pModel": "150gm",
      "actualPrice": "23",
      "offer": 0,
      "availablity": "3"
    }],
    "id": "569e0abed08598371ebe5424",
    "createdOn": "19-Jan-2016 09:29:26 UTC"
  }];
  console.log($scope.products);
});

<div ng-app="tt" ng-controller="TTTT">
  <div ng-repeat="product in products track by $index">
    {{$index + 1}} &nbsp;{{product.pname}}
    <div ng-repeat="ptag in product.priceTag track by $index">
      {{$parent.$index +1 }}.{{ $index + 1}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}
    </div>

  </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 2

       {{$index+1}}  {{product.pname}}

this must be

      {{product.$index+1}}  {{product.pname}}

and this

     <div ng-repeat="ptag in product.priceTag track by $index">
     {{$index}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}   
     </div>

By

     <div ng-repeat="ptag in product.priceTag track by product.$index">
     {{ptag.$index}} &nbsp;{{ptag.pModel}} &nbsp;{{ptag.actualPrice}}   
     </div>