title: Angularjs data from json, onclick , show corresponding data to the right
body: <p>I'm very new to angularjs and I have been trying to figure this out.
  Please check the code below to see what I mean.
  The titles are listed to the left, I would like the corresponding body to appear to the right when the title links are clicked. A good example can be found here, <a href="http://twotenjack.com/nashville/" rel="nofollow">http://twotenjack.com/nashville/</a>, look at the menus section.
  Any help is appreciated</p>
  
  <pre><code>[
    {
      "title" : "Sake / Shochu - TBD",
      "Body" : "Sake / Shochu - TBD\n",
      "Category" : "Beverage",
      "Nid" : "19"
    },
    {
      "title" : "Bottle Beer ",
      "Body" : "Bottle Beer - TBD\n",
      "Category" : "Beverage",
      "Nid" : "18"
    },
    {
      "title" : "Wine",
      "Body" : "House red wine - Rotating varietal\nHouse white wine - Rotating varietal\n",
      "Category" : "Beverage",
      "Nid" : "17"
    },
    {
      "title" : "On Tap",
      "Body" : "Kona – Golden Lager\nKirin Ichiban – Pale Lager\nHitachino – White Ale\nSapporo Premium Draft\nAsahi Super Dry\nThree Weavers\n",
      "Category" : "Beverage",
      "Nid" : "16"
    },
    {
      "title" : "San Pellegrino",
      "Body" : "San Pellegrino\n",
      "Category" : "Beverage",
      "Nid" : "15"
    },
    {
      "title" : "Tea",
      "Body" : "Tea - House-brewed Jasmine Iced Tea\n",
      "Category" : "Beverage",
      "Nid" : "14"
    },
    {
      "title" : "Soda",
      "Body" : "Soda - Coke, Diet Coke, Sprite, Dr. Pepper, Root Beer, Lemonade\n",
      "Category" : "Beverage",
      "Nid" : "13"
    },
    {
      "title" : "Salads",
      "Body" : "Maaketo – Classic Market Salad.                                                                                                                                                      \nChopped romaine, carrots, avocado, smoked bacon bits, grilled chicken, almonds, mandarin, fresh wonton crisp, creamy yuzu vinaigrette\n \nTempeh with Kare – Vegetarian Goodness!                                                                                                                                                \nOrganic Tempeh, Shoyu marinade, carrots, yuzu-jalapeno slaw, citrus yuzu-vinaigrette, fried egg, slow-cooked Japanese curry\n \n",
      "Category" : "Food",
      "Nid" : "12"
    },
    {
      "title" : "Rice and Poultry ",
      "Body" : "Karē Loco Moco: Have a Feast and Take a Nap!                                                                                                                             \nDouble Angus patty, slow-cooked Japanese curry, fried egg\n* Substitute Angus patty with chicken patty\n \nChicken Katsu with Karē: Classic Comfort                                                                                                                                   \nPanko-crusted fried chicken, slow-cooked japanese curry\n* Add fried egg\n",
      "Category" : "Food",
      "Nid" : "11"
    }
  ]
  </code></pre>
  
  <p>Here is my JS:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.controller('menuCtrl', function($scope, $http) {
      $http.get("menu-json").success(function(response) {
          $scope.titles = response;
          var nid ="19";
          $scope.isFood = function(titles) {
             return titles.Category === "Food";
          };
          $scope.isBeverage = function(titles) {
             return titles.Category === "Beverage";
          };
      });
  });
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="menu" class="wrapper clearfix" ng-app="myApp" ng-controller="menuCtrl"&gt;
  
      &lt;h2 class="block-title"&gt;Menu&lt;/h2&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h3 class="food"&gt;Food&lt;/h3&gt;
          &lt;ul class="ul-food"&gt;
             &lt;li class="node{{ x.Nid }}" ng-repeat="x in titles | filter:isFood"&gt;
               &lt;a href""&gt; {{ x.title }}&lt;/a&gt;
             &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;h3 class="food"&gt;Beverage&lt;/h3&gt;
          &lt;ul class="ul-bev"&gt;
             &lt;li ng-repeat="x in titles | filter:isBeverage"&gt;
                &lt;a href""&gt; {{ x.title }}&lt;/a&gt;
             &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
          &lt;div class="body"&gt;
              The corresponding body from json should appear here when you click on a title
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- end wrapper--&gt;
  </code></pre>