title: How to create a custom directive for a JSON response received
body: <p>I wanted to create a custom directive addressing the scope to one of the object</p>
  
  <p>JavaScript: </p>
  
  <pre><code>var module = angular.module('myApp', []);
  
  module.controller('FoodCourtMenuController', function ($scope) {
  $scope.GetMenu = function () {
      var json = '[{"FoodCourtName":"Fiesta","FoodCourtDetails":[{"VendorName":"Adigas","VendorDetails":[{"FoodTypeName":"Breakfast","FoodTypeDetails":[{"Name":"Aloo paratha","Price":"Rs. 60","IsVeg":"True","ItemDetails":"2 nos"},{"Name":"North indian meal","Price":"Rs. 60","IsVeg":"True","ItemDetails":"sweet + roti"}]},{"FoodTypeName":"Lunch","FoodTypeDetails":[{"Name":"Dosa","Price":"Rs. 60","IsVeg":"True","ItemDetails":""},{"Name":"South indian meal","Price":"Rs. 80","IsVeg":"True","ItemDetails":"sweet + rice"}]}]},{"VendorName":"Kaamath","VendorDetails":[{"FoodTypeName":"Breakfast","FoodTypeDetails":[{"Name":"Sprouts","Price":"Rs. 60","IsVeg":"True","ItemDetails":"2 nos"},{"Name":"Fruit bowl","Price":"Rs. 60","IsVeg":"True","ItemDetails":"sweet + roti"}]},{"FoodTypeName":"Lunch","FoodTypeDetails":[{"Name":"Idly","Price":"Rs. 60","IsVeg":"True","ItemDetails":""},{"Name":"Palav","Price":"Rs. 80","IsVeg":"True","ItemDetails":"sweet + rice"}]}]}]},{"FoodCourtName":"Magna","FoodCourtDetails":[{"VendorName":"Polar Bear","VendorDetails":[{"FoodTypeName":"Breakfast","FoodTypeDetails":[{"Name":"Vanilla","Price":"Rs. 40","IsVeg":"True","ItemDetails":"2 nos"},{"Name":"Chocolate","Price":"Rs. 60","IsVeg":"True","ItemDetails":"3 nos"}]}]},{"VendorName":"Wonder Chicken","VendorDetails":[{"FoodTypeName":"Dinner","FoodTypeDetails":[{"Name":"Chicken","Price":"Rs. 100","IsVeg":"False","ItemDetails":"4 nos"}]}]}]}]';
      var resultJSON = eval('(' + json + ')');
      $scope.resultJSON = resultJSON;
  }
  });
  
  module.directive('foodItem', function () {
  var directive = {};
  directive.restrict = 'AEC';
  directive.template = '{{FoodCourtName}}';
  directive.scope = {
      FoodCourtName: "=FoodCourtName"
  }
  return directive;
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="FoodCourtMenuController"&gt;
      &lt;input type="search" ng-model="txtSearch" name="txtSearch" placeholder="Search menu" /&gt;
      &lt;br /&gt;
      &lt;input type="button" ng-click="GetMenu()" value="Get Menu" /&gt;
  
  &lt;div id="menu" ng-repeat="x in resultJSON"&gt;
          &lt;foodItem FoodCourtName="{{x.FoodCourtName}}"&gt;&lt;/foodItem&gt; &lt;!--1st scenario--&gt;
          &lt;span food-item food-court-name="{{x.FoodCourtName}}"&gt;&lt;/span&gt; &lt;!--2nd scenario--&gt;
          &lt;food-item food-court-name="{{x.FoodCourtName}}"&gt;&lt;/food-item&gt; &lt;!--3rd scenario--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm able to populate the data as below using ng-bind, I wanted to use the custom directive, so that i get a better understanding of the same.</p>
  
  <p>Solution would be really appreciated. Thanks in advance.</p>
  
  <pre><code>&lt;div id="menu"  ng-repeat="foodCourt in resultJSON"&gt;
              &lt;div ng-repeat="vendor in foodCourt.FoodCourtDetails"&gt;
                  &lt;div ng-repeat="foodType in vendor.VendorDetails"&gt;
                      &lt;div ng-repeat="foodItem in foodType.FoodTypeDetails"&gt;
                          &lt;div style="border-bottom:1px solid #000;"&gt;
                              &lt;span ng-bind="foodCourt.FoodCourtName" style="padding:10px;"&gt;&lt;/span&gt;
                              &lt;span ng-bind="vendor.VendorName" style="padding:10px;"&gt;&lt;/span&gt;
                              &lt;span ng-bind="foodType.FoodTypeName" style="padding:10px;"&gt;&lt;/span&gt;
                              &lt;span ng-bind="foodItem.Name" style="padding:10px;"&gt;&lt;/span&gt;
                              &lt;span ng-bind="foodItem.Price" style="padding:10px;"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>