Angularjs 选择“操纵模型”选项

我在选择（选项）列表中单击时有一种奇怪的行为

servicse.js：

services.factory('AppAPIService', function($resource){
    return {
        serviceReports: $resource('rest/services/report', {}, {query: {method: 'GET', params: {}, isArray: false }})
    }});

controller.js

app.controller('AppCtrl1', ['$scope', 'AppAPIService', function($scope, AppAPIService) {

$scope.reportsQuery = AppAPIService.serviceReports.query();

$scope.setSelectedItem = function($rep) {

    //$('#selectedJobTemplates').empty();
    var sourceList = document.getElementById($rep); 

    $scope.availableReports = $scope.reportsQuery[sourceList.selectedIndex].reports;
    console.error($scope.reports);
}}]);

Html代码的一部分：

<div>
    <label for="workspace">Reporting</label>
    <div>
        <select name="reports" id="reports" ng-change="setSelectedItem('reports')">
                <option value="Full">Full</option>
                <option value="Quarter">Quarter</option>
        </select>
    </div>
</div>

   <div>
    <div>A</div>
        <div>
            <select name="availableReports" id="availableReports" class="height150" size="10" ng-model="availableReports" ng-options="item for item in availableJobTemplates">
            </select>
       </div>
    </div>

问题：在ng更改选择时，“报告”列表“A”已正确填写。但是在列表A中选择一个元素后，元素（列表A中）消失，并且所选元素（例如“开发人员”）在每一行中逐个字符显示

我没有分配单击侦听器

---

永远不要在控制器上操纵DOM！替换$（“#selectedJobTemplates”）.empty（）；！您应该使用一个列表来绑定这个select，并通过清理数组在作用域中清理它！再一次从不在控制器上操纵DOM。你没有用

结束select标记，这是你的复制粘贴中的一个输入错误还是你实际编写它的方式？这是一个输入错误，我修复了它。我也更正了json。

{"reportsQuery":[{"workspace":"HR & Management","reports":["Sales","Management","Marketing","Human-Resources"]},{"workspace":"Engineering","reports":["IT-Conultant","IT-Administration","Developer","Tester","Requirements-Engineer"]}]}