Navigating through the JSON Angular

i have two JSON one with category and one with all the product. Product are classified according to the product. Now im displaying all the categories in the navbar and on either click or hover the category the product list must pop out.
How shall i do this
theese are the 2 jsons: $scope.categories = [{
“id”: “1”, “name”: “Banking”
}, {
“id”: “2”, “name”: “Insurance”
}, {
“id”: “3”, “name”: “Automobile”
}];
$scope.products = [{
“productId”: “x10001”,
“productName”: “DIRECT DEPOSIT”,
“categoryid”: {“id”: “1”, “name”: “Banking”},
“productURL”: “http://bankonsanfrancisco.com/why”,
“productDesc”: “Short Desc”,
“createddate”: “9/18/1996”,
“updateddate”: “9/18/2015”,
“documents”: [{
“link1”: “url1”,
“link2”: “url2”,
“link3”: “url3”
}],
“videos”: [{
“link1”: “url1”,
“link2”: “url2”
}],
“screenshot”: [{
“link1”: “img1”,
“link2”: “img2”
}],
“bgimage”: “http://www.pmbl-ng.com/images/about.jpg
},

    {
        "productId": "x10002",
        "productName": "Individual Banking",
        "categoryid": {"id": "1", "name": "Banking"},
        "productURL": "https://www.google.co.in/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=individual%20Banking&oq=individual%20Banking&aqs=chrome..69i57j0l5.4255j0j7",
        "productDesc": "Short Desc",
        "createddate": "9\/18\/1996",
        "updateddate": "9\/18\/2015",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    },

     {
        "productId": "x10003",
        "productName": "Business Banking",
        "categoryid": {"id": "1", "name": "Banking"},
        "productURL": "http://bankonsanfrancisco.com/why",
        "productDesc": "Short Desc",
        "createddate": "9\/18\/1996",
        "updateddate": "9\/18\/2015",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    }, {
        "productId": "x10004",
        "productName": "Digital Banking",
        "categoryid": {"id": "1", "name": "Banking"},
        "productURL": "https://localfirstbank.com/business/",
        "productDesc": "Online Banking, also known as internet Banking, e-Banking or virtual Banking, is an electronic payment system that enables customers of a bank or other financial institution to conduct a range of financial transactions through the financial institution's website. The online Banking system will typically connect to or be part of the core Banking system operated by a bank and is in contrast to branch Banking which was the traditional way customers accessed Banking services. Fundamentally and in mechanism, online Banking, internet Banking and e-Banking are the same thing.",
        "createddate": "9\/20\/1996",
        "updateddate": "1\/20\/2015",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    }, {
        "productid": "x10005",
        "productName": "Embee Ins. Brokers Ltd.",
        "categoryid": {"id": "2", "name": "Insurance"},
        "productURL": "http://www.embeegroup.in/",
        "productdesc": "Embee Financial Services Ltd. is an integrated 'Niche' financial services group that provides full range of corporate advisory services to its clients. The services provided include one stop solution to the Corporate & SMEs in areas of Corporate Finance & Investment Banking, Management Consulting, Wealth Management, Legal & Statutory services & Insurance Broking.",
        "createddate": "9\/20\/1896",
        "updateddate": "1\/20\/2014",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    }, {
        "productid": "x10006",
        "productName": "Excellent Insurance Broking Services Ltd.",
        "categoryid": {"id": "2", "name": "Insurance"},
        "productURL": "http://www.excellentinsurancebroking.com/",
        "productdesc": "Excellent Insurance Broking Services Ltd is one of the leading insurance broking firms that operate on both direct and reinsurance broking licenced & regulated by IRDAI. Backed by more than a decade of experience and a team of highly qualifiedand professionals from Insurance, Reinsurance, Engineering, Finance, Medicine, IT,Legal and Investigation fields. We are based in Hyderabad, India, with a branch in Bangalore is positioned to handle all insurance and reinsurance requirements through exclusive networks of national and international associates and underwriters. We give innovative solutions with highest competence. EIBSL works closely with insurers to negotiate competitive rates to meet the needs of both existing and potential clients.",
        "createddate": "9\/20\/1996",
        "updateddate": "1\/20\/2015",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    }, {
        "productid": "x10007",
        "productName": "Ford Model T",
        "categoryid": {"id": "3", "name": "Automobile"},
        "productURL": "https://en.wikipedia.org/wiki/Ford_Model_T",
        "productdesc": "The first car to achieve one million, five million, ten million and fifteen million units sold. By 1914, it was estimated that nine out of every ten cars in the world were Fords",
        "createddate": "9\/20\/1908",
        "updateddate": "1\/20\/2015",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    }, {
        "productid": "x10008",
        "productName": "Volkswagen Beetle",
        "categoryid": {"id": "3", "name": "Automobile"},
        "productURL": "https://en.wikipedia.org/wiki/Volkswagen_Beetle",
        "productdesc": "The need for this kind of car, and its functional objectives, were formulated by Joseph Ganz, an engineer whose ideas influenced Adolf Hitler after he saw the car at an auto show. The leader of Nazi Germany wished for a cheap, simple car to be mass-produced for the new road network of his country. He contracted Ferdinand Porsche in 1934 to design and build it, after telling him in 1933 ",
        "createddate": "9\/20\/1938",
        "updateddate": "1\/20\/2015",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    }, {
        "productid": "x10009",
        "productName": "Toyota Corolla",
        "categoryid": {"id": "3", "name": "Automobile"},
        "productURL": "https://en.wikipedia.org/wiki/Toyota_Corolla",
        "productdesc": "he Toyota Corolla is a line of subcompact and compact cars manufactured by Toyota. Introduced in 1966, the Corolla was the best-selling car worldwide by 1974[1] and has been one of the best-selling cars in the world since then. In 1997, the Corolla became the best selling nameplate in the world, surpassing the Volkswagen Beetle.[2] Toyota reached the milestone of 40 million Corollas sold over eleven generations in July 2013.[3] The series has undergone several major redesigns. The name Corolla is part of Toyota's naming tradition of using names derived from the Toyota Crown for sedans. The Corolla has always been exclusive in Japan to Toyota Corolla Store locations, and manufactured in Japan with a twin, called the Toyota Sprinter until 2000. In Japan and much of the world, the hatchback companion since 2006 is called the Toyota Auris. Prior to the Auris, Toyota used the Corolla name on the hatchback bodystyle in various international markets.",
        "createddate": "9\/20\/1966",
        "updateddate": "1\/20\/2015",
        "documents": [{
            "link1": "url1",
            "link2": "url2",
            "link3": "url3"
        }],
        "videos": [{
            "link1": "url1",
            "link2": "url2"
        }],
        "screenshot": [{
            "link1": "img1",
            "link2": "img2"
        }],
        "bgimage": "http:\/\/www.pmbl-ng.com\/images\/about.jpg"
    }

];

How can i display this:

Category

This is the html code where im trying to populate the json values