如何使用 Angularjs 制作级联下拉菜单？

在这里，我添加了带有子型号的移动品牌名称列表。 我的期望： 1.这里多次列出诺基亚和三星 HTC。如何避免列表中重复出现相同的名称
2.当我在第一个下拉列表中选择诺基亚时，一个新的下拉列表应出现在第一个下拉列表中，它应显示诺基亚品牌型号列表。如果我在第一个下拉列表中选择 htc，一个新的下拉列表应出现在第一个下拉列表中，它应显示 htc 品牌型号list.帮我解决这个问题

angular.module('myApp', [])
    .controller("myCntrl", function ($scope) {

    $scope.items= [{


        id: "986745",
        brandname: "Nokia",
        modelname: "Lumia 735"

    }, {

        id: "896785",
        brandname: "Nokia",
        modelname: "Asha 230"
    }, {

        id: "546785",
        brandname: "Nokia",
        modelname: "Lumia 510"
    },
    {

        id: "144745",
        brandname: "Samsung",
        modelname: "50% offer for break fast"
    },

    {

        id: "986980",
        brandname: "Samsung",
        modelname: "Galaxy A5"
    },
    {

        id: "586980",
        brandname: "Samsung",
        modelname: "Galaxy Note 4 Duos"
    },
    {

        id: "986980",
        brandname: "Samsung",
        modelname: "Galaxy A5"
    },
    {

        id: "586980",
        brandname: "Samsung",
        modelname: "Galaxy Note 4 Duos"
    },

    {

        id: "232980",
        brandname: "Htc",
        modelname: "One X9"
    },
    {

        id: "456798",
        brandname: "Htc",
        modelname: "Desire 820"
    }

    ]





})
//]]>

html代码

<div ng-app="myApp">
    <div ng-controller="myCntrl">
        <label>List Of Brand</label>

        <label for="singleSelect"> select: </label>
        <select ng-model="selectedItem">
        <option ng-repeat="item in items " value="{{item.id}}">{{item.brandname}}</option>
        </select>




    </div>

</div>

demo

添加角度用户界面过滤器：

angular.module('myApp', ['ui.filters'])

第一个列表显示了不同的品牌：

ng-repeat="item in items | unique: 'brandname'"

第二个列表按品牌过滤：

ng-repeat="item in items | filter: {brandname: selectedBrand}"

jsfiddle