Fetch data from json and display accordingly Angular js

I am a newbie to angular js.This might be a piece of cake for many of you. Could you please guide me? I have a json file, a view to display, index.html(view), and a controller(index_angular.js).In the image the second and third columns are drop down menus corresponding to the technology id in json.

How to parse the json and display in the view according to the image as its attached.

Thanks in advance.

JSON STRUCTURE:

{
    "technology": [
        {
            "id": "AKC",
            "detail": {
                "drop1": [
                    {
                        "id": "AKC-lst-1231"
                    },
                    {
                        "id": "AKC-lst-1232"
                    },
                    {
                        "id": "AKC-lst-1233"
                    }
                ],
                "drop2": [
                    {
                        "id": "T_AKC_live"
                    },
                    {
                        "id": "T_AKC_Capt"
                    },
                    {
                        "id": "T_AKC_live1"
                    }
                ]
            }
        },
        {
            "id": "MET",
            "detail": {
                "drop1": [
                    {
                        "id": "MET-2st"
                    },
                    {
                        "id": "MET-34"
                    }
                ],
                "drop2": [
                    {
                        "id": "sd-232"
                    },
                    {
                        "id": "sd-121"
                    }
                ]
            }
        }
    ]
}

Required Format to display in view in Angular JS:

Coloumn 2 and coloumn 3 are drop down menus of drop1 and drop2 of corresponding technology id

index_angular.js(CONTROLLER)

var myModule=angular.module('test',[]);
myModule.controller("test_controller", function($scope,$http){
            $scope.message = "hello world!";
            $scope.posts = "";
            $scope.init=function(){

            $scope.friends = ["Test friends","test1","test2","test4","test5","test6","test7","test8","test9","test10","test11","test12","test13","test113","test14","test114","test15","test133","test23","test33","test35"];


            $http.get("test.json").
            success(function(data, status, headers, config) {
            $scope.posts = data;
            alert($scope.posts);
            $scope.tech_name=[];
            $scope.technology="";
            console.log($scope.posts);
            var tech_marker_count= $scope.posts.technology.length;
            alert(tech_marker_count);//count of technology

            for(var tech_marker=0;tech_marker<tech_marker_count;tech_marker++)
            {
             $scope.tech_name.push($scope.posts.technology[tech_marker].id);
             $scope.technology=$scope.posts.technology[tech_marker].id;
             alert( $scope.technology);
            }

            }).
            error(function(data, status, headers, config) {
            alert("Error fetching data");
      // log error
    });

};      
        });

index.html(VIEW)

 <div class="view_data"> 
       <ul>

       </ul>
  </div>