如何从Dropdownlist中获取选定的值名称，以便在Angularjs中显示用户显示

Question

应在UI中显示所选的下拉值。就像我选择类别一样，类别名称必须显示在UI中，如果我选择某种类型，那么该类型应该在UI中显示。 但它不起作用。

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.flooringcoeff = {
        cement: "0.02",
        sand: "0.13",
        POP: "1.02",
        polythene: "0.1"
    }

    $scope.type = {
        "Marbal flooring": {
            random_slab: "random slab",
            standard_tyle: "standard tyle",
            random_slab: {
                "3050x1830": {
                    l1: "3050",
                    b1: "1830"
                },
            },
            standard_tyle: {
                "300x300": {
                    l1: "300",
                    b1: "300"
                },
                "300x600": {
                    l1: "300",
                    b1: "600"
                },
                "400x400": {
                    l1: "400",
                    b1: "400"
                },
                "450x450": {
                    l1: "450",
                    b1: "450"
                }

            }
        },
        "Granite flooring": {
            random_slab: "random slab",
            standard_tyle: "standard tyle",
            random_slab: {
                "2950x985": {
                    l1: "2950",
                    b1: "985"
                },
            },
            standard_tyle: {
                "300x300": {
                    l1: "300",
                    b1: "300"
                },
                "300x600": {
                    l1: "300",
                    b1: "600"
                },
                "400x400": {
                    l1: "400",
                    b1: "400"
                },
                "450x450": {
                    l1: "450",
                    b1: "450"
                }

            }
        },
        "Tile flooring": {
            Ceramic_wall_tile: "Ceramic wall tile",
            Glazed_Vitrified_tile: "Glazed Vitrified tile",
            Vitrified_DCH: "Vitrified DCH",
            Vitrified_Heavy_duty_body: "Vitrified Heavy duty body",
            Ceramic_wall_tile: {
                "300x300": {
                    l1: "300",
                    b1: "300"
                },
                "300x600": {
                    l1: "300",
                    b1: "600"
                },
                "600x148": {
                    l1: "600",
                    b1: "148"
                },
                "450x450": {
                    l1: "450",
                    b1: "450"
                },
            },
            Glazed_Vitrified_tile: {
                "300x300": {
                    l1: "300",
                    b1: "300"
                },
                "300x600": {
                    l1: "300",
                    b1: "600"
                },
                "400x400": {
                    l1: "400",
                    b1: "400"
                },
                "450x450": {
                    l1: "450",
                    b1: "450"
                }
            },
            Vitrified_DCH: {
                "300x300": {
                    l1: "300",
                    b1: "300"
                },
                "300x600": {
                    l1: "300",
                    b1: "600"
                },
                "400x400": {
                    l1: "400",
                    b1: "400"
                },
                "450x450": {
                    l1: "450",
                    b1: "450"
                }
            },
            Vitrified_Heavy_duty_body: {
                "300x300": {
                    l1: "300",
                    b1: "300"
                },
                "300x600": {
                    l1: "300",
                    b1: "600"
                },
                "400x400": {
                    l1: "400",
                    b1: "400"
                },
                "450x450": {
                    l1: "450",
                    b1: "450"
                }
            }
        }
    };
    $scope.change = function() {
        if ($scope.data.previousSel != $scope.data.selectedOption) {
            var diff = $scope.data.previousSel.id - $scope.data.selectedOption.id;
            angular.forEach($scope.choices, function(choice) {
                choice.l2 = Math.pow(10, diff) * choice.l2;

                choice.b2 = Math.pow(10, diff) * choice.b2;
            });
            $scope.data.previousSel = $scope.data.selectedOption;
        }
    };
    $scope.data = {
        availableOptions: [{
            id: '1',
            name: 'mm'
        }, {
            id: '2',
            name: 'cm'
        }, {
            id: '4',
            name: 'm'
        }],
        previousSel: {
            id: '4',
            name: 'm'
        },
        selectedOption: {
            id: '4',
            name: 'm'
        } //This sets the default value of the select in the ui

    };
    $scope.choices = [{
        id: 'choice1',
        l2: 0,
        b2: 0
    }];

    $scope.addNewChoice = function() {
        var newItemNo = $scope.choices.length + 1;
        $scope.choices.push({
            'id': 'choice' + newItemNo
        });
    };

    $scope.removeChoice = function() {
        var lastItem = $scope.choices.length - 1;
        $scope.choices.splice(lastItem);
    };

    $scope.sum = function() {
        var sum = 0;
        angular.forEach($scope.choices, function(choice) {
            sum += choice.l2 * choice.b2;
        });
        return sum;
    }
});

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="floring_graniting.js"></script>

<body>
    <fieldset>
        <div ng-app="myapp" ng-controller="MainCtrl">
            <br> <b>Input</b><br>
            <p>Select a unit:</p>
            <select ng-change="change()" ng-model="data.selectedOption" ng-options="option.name for option in data.availableOptions track by option.id">
                        </select>
            <p>Select a category:</p>
            <select ng-model="selectedcategory" ng-options="x for (x, y) in type">
                        </select>
            <p>Select a Type:</p>
            <select ng-model="selectedtype" ng-options="x for (x, y) in selectedcategory">
                        </select>
            <p>Select a size:</p>
            <select ng-model="selectedsize" ng-options="x for (x, y) in selectedtype">
                        </select>
            <p>Enter the room Details</p>

            <form data-ng-repeat="choice in choices">
                <br> Room {{$index + 1}} : Length:
                <input type="number" ng-model="choice.l2" />width:
                <input type="number" ng-model="choice.b2" />Area:
                <input id="area" type="number" placeholder="Area" value="{{ choice.l2 * choice.b2}}" />
                <button ng-show="$last" ng-click="removeChoice()">-</button>
                <button ng-click="addNewChoice()">+</button>
            </form>
            Total Area : {{ sum() | number:2}}
            <br><br> <b>Output</b></br>
            Marble slab:{{((sum() * 1.1) / ((selectedsize.l1 / 1000) * (selectedsize.b1 / 1000)))}}slab<br> Cement:{{((sum() * 10.76) * flooringcoeff.cement) | number:2}}bags<br> Sand:{{((sum() * 10.76) * flooringcoeff.sand) | number:2}}cft<br> POP:{{((sum() * 10.76) * flooringcoeff.POP) | number:2}}Kgs<br> Polythene:{{((sum() * 10.76) * flooringcoeff.polythene) | number:2}}Kgs<br>
    </fieldset>

</body>

</html>

任何angularjs专家都会帮助我吗？