Displaying nested JSON in a directive

Issue

I am trying to work out how to display nested JSON inside a directive. The code below displays a list of days in a ng-repeat inside a directive. I want to put an ng-click on each row that will update another repeater in the directive that will display a list of that days products. This new product repeater should be outside the days repeater in another div. I am not sure what that logic should be or where to place it - in the controller or the directive?

So here's the JSON:

{
 "currentMonth":"November",
 "calendarDateView":[
{
  "dateOfTheMonth":1,
  "Products":[
  ]
},
{
  "dateOfTheMonth":2,
  "Products":[
    {
      "prodID":311
    },
    {
      "prodID":308
    }
  ]
}
{
  "dateOfTheMonth":3,
  "Products":[
    {
      "prodID":322
    }
  ]
}
]
}  

Which I display in a ng-repeat in a directive...

//directive markup (inside calendarController)
<div ng-repeat="date in dates" ng-click>
{{date.dateOfTheMonth}}
</div>

//directive js
 calendarApp.directive('calendarDirective', function() {
    return {
        restrict: 'AE',
        templateUrl: 'calendar/calendarView.html',
        scope: {
            dates: '=dates'
        }
    };
});

And I pass the data for the directive via the controller...

calendarApp.controller("calendarController", function($scope, availableDates) {
availableDates().success(function(data) {
    $scope.dates = data;
});
});  

The expected result would be:

Days:
1
2 
3

Products for day 2: (populates when day is clicked, in this example it's day 2)

311
308

Solution

Now the solution includes custom directive, which you can reuse anywhere you'd like (setId() and getId() were moved to the directive's isolate scope).

Reworked HTML:

<div ng-app="myApp" ng-controller="myCtrl">
    <my-dir dates="dates"></my-dir>
    <h2>Hi!</h2>
    <my-dir dates="dates"></my-dir>
</div>

Template v.1 (calendar/calendarView.html) - list of product ID's appears under each date object:

<div>
  <div ng-repeat="date in dates.calendarDateView" ng-click="setId($index)">
  {{date.dateOfTheMonth}}
  <div ng-show="getId($index)">
    <div ng-repeat="item in date.Products">Product ID: {{item.prodID}}</div>
  </div>
</div>

Template v.2 (calendar/calendarView.html) - list of product ID's appears after all date objects:

<div>
  <div ng-repeat="date in dates.calendarDateView" ng-click="setId($index)">
    {{date.dateOfTheMonth}}
  </div>
  <div ng-repeat="date in dates.calendarDateView">
    <div ng-show="getId($index)">
      <div ng-repeat="item in date.Products">Product ID: {{item.prodID}</div>
    </div>
  </div>
</div>

Controller (with myDir directive this time):

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
  $scope.dates = {
    "currentMonth":"November",
    "calendarDateView":[
      {
        "dateOfTheMonth":1,
        "Products":[
        ]
      },
      {
        "dateOfTheMonth":2,
        "Products":[
          {
            "prodID":311
          },
          {
            "prodID":308
          }
        ]
      },
      {
        "dateOfTheMonth":3,
        "Products":[
          {
            "prodID":322
          }
        ]
      }
    ]
  };
}])
 .directive("myDir", function(){
    return {
      restrict: "EA",
      templateUrl: "calendar/calendarView.html", 
      scope: {
        dates: "="
      },
      replace: true, 
      link: function(scope, element, attrs){
        scope.setId = function(index){
          var id = "id"+index;
          return scope[id] = !scope[id];
        };
        scope.getId = function(index){
          var id = "id" + index;
          return scope[id];
        }
      }
    }
  });

Answered By - ZenDD