Click event in Angularjs

Displaying the event depending on click from array/json

by santhosh lanka

HTML

<div ng-controller="MainCtrl">
    <div id="menu">
        <div>
            <h3>Food</h3>
            <ul>
                <li ng-repeat="x in titles | filter:isFood">
                    <a ng-click="select(x)"> {{ x.title }}</a>
                </li>
            </ul>
            <h3>Beverage</h3>
            <ul>
                <li ng-repeat="x in titles | filter:isBeverage">
                    <a ng-click="select(x)"> {{ x.title }}</a>
                </li>
            </ul>
        </div>
        <div>
            <div>
                <h2>{{selectedItem.title}}</h2>
                <p>{{selectedItem.Body}}</p>
            </div>
        </div>
    </div>
<div>

</div>

JavaScript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
    $http.get("menu.json")
        .success(function(response) {
            $scope.titles = response;
            $scope.isFood = function(titles) {
                return titles.Category === "Food";
            };
            $scope.isBeverage = function(titles) {
                return titles.Category === "Beverage";
            };
        });
        
    $scope.select = function(item) {
        $scope.selectedItem = item;
    };
});