Javascript $scope缺少select绑定的成员

$scope似乎缺少文本框typeahead和选择列表的绑定属性。 这是一把小提琴，显示了我想要的行为： 您可以根据需要添加和删除销售人员。$scope正确绑定到$scope.salesman输入在typeahead中选择的销售人员和在列表框中选择的$scope.selectedsalesman销售人员

这是我复制并粘贴到项目中的同一代码，但它不起作用。我使用的都是相同的图书馆参考资料。似乎作用域对这两个变量不起作用$scope.salesmanEntry和$scope.SelectedSalesMan始终未定义。我的完整控制器代码如下。什么可能会干扰我的$scope

我正在视图上输出以下内容：

<div>{{salesmanEntry.id}} {{salesmanEntry.displayName}}</div>

模板：

<div ng-app="manageProductsModule">
    <div class="container" ng-controller="productDetailCtrl">
        <h3>Model Details</h3>
        <form class="form-horizontal" role="form" ng-if="!loadingProduct">
            <div class="form-group">
                <label for="addSalesmenInput" class="control-label col-md-2">Add</label>
                <div class="col-md-4">
                    <div class="input-group">
                        <input name="addSalesmenInput" 
                               class="form-control" 
                               ng-model="salesmanEntry" 
                               typeahead="salesman as salesman.displayName for salesman in allSalesmen | filter:$viewValue" />
                        <div class="input-group-btn">
                            <button class="btn" ng-click="addSalesman(salesmanEntry)" ng-disabled="!salesmanEntry">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="salesmenInput" class="control-label col-md-2">Salesmen With Access</label>
                <div class="col-md-4">
                    <select name="salesmenInput" multiple="multiple" size="8" class="form-control" ng-model="selectedSalesmen" ng-options="salesman as salesman.displayName for salesman in addedSalesmen"></select>
                    <button class="btn" ng-click="removeSalesmen()" ng-disabled="!selectedSalesmen || selectedSalesmen.length === 0">
                        <i class="glyphicon glyphicon-minus"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

---

所以我要做的就是让这一切顺利进行。我绝对不满意一个看起来非常粗糙的解决方案，我想知道为什么这是必要的。我必须转到$scope.$$childHead才能访问salesmanEntry和selectedSalesmen，因为它们显然存储在错误的作用域中

    $scope.addSalesman = function (salesman) {
        if (!salesman.id) return;
        var result = $.grep($scope.addedSalesmen, function (e) { return e.id == salesman.id; });
        if (result.length === 0) {
            $scope.addedSalesmen.push(salesman);
        }
        $scope.$$childHead.salesmanEntry = { id: -1, displayName: "" };
    };

    $scope.removeSalesmen = function () {
        $scope.$$childHead.selectedSalesmen.forEach(function (salesman) {
            var index = $scope.addedSalesmen.indexOf(salesman);
            $scope.addedSalesmen.splice(index, 1);
        });
        $scope.$$childHead.selectedSalesmen = [];
    }

---

请您也加入您的模板代码好吗？添加的模板代码，typeahead和列表框的部分朝向htmlIf的底部，如果它是完全相同的代码。。。Angular插件和其他插件的版本如何？我从我的Fiddle复制了库CDN，它们使用完全相同的库和版本。我已经将代码依赖性降低到几乎为零，以与JSFIDLE相匹配，请参阅文章。它仍然表现出相同的行为，fiddle工作正常，我的代码没有。看起来这并不总是有效。。。好像$$childHead$范围有点随机？？？我在所有依赖项中重新添加，现在我必须使用$scope.$$childHead.$$childTail。。哇！

    $scope.addSalesman = function (salesman) {
        if (!salesman.id) return;
        var result = $.grep($scope.addedSalesmen, function (e) { return e.id == salesman.id; });
        if (result.length === 0) {
            $scope.addedSalesmen.push(salesman);
        }
        $scope.$$childHead.salesmanEntry = { id: -1, displayName: "" };
    };

    $scope.removeSalesmen = function () {
        $scope.$$childHead.selectedSalesmen.forEach(function (salesman) {
            var index = $scope.addedSalesmen.indexOf(salesman);
            $scope.addedSalesmen.splice(index, 1);
        });
        $scope.$$childHead.selectedSalesmen = [];
    }