Javascript AngularJS没有在我的控制器中使用$scope变量的更新值

我已经在下面粘贴了相关的代码片段。 我知道基本angularJS正在工作，因为HTML文档没有显示{{}}变量，但是我得到了一个空白

我相信这是因为变量的值为空。当我在控制器内执行一些console.log表达式时，我可以看到值会相应地更新，但在控制器外则不同

代码：

范围选择
观察者
全部的
{{观察员}}
主办
全部的
{{host}}
缺陷
全部的
{{bug}}
{{观察员}}

主机{{Host}
{{bug}}从{item.start}到{{item.end}
var summaryApp=angular.module（'summaryApp'，[]）；
summaryApp.controller（“范围排序”，函数（$scope）{
hosts=[]、observators=[]、bug=[]、JSONbugsList=[]；
主机键=[]、observer键=[]、错误键=[]；
bugTracker={}；
$.getJSON（'../java\u output/bug\u summary.json'，函数（数据）{
JSONbugsList=数据；
var numObservers=data.numObservers；
var-bugTracker={}；
for（var observer=1；observer
getJSON
不是角度调用，因此不会触发摘要循环，因此从不更新视图。因此，混合使用角度调用和jQuery不是一个好主意。角度调用附带jqLite-jQuery函数的较小子集

您的数据调用应该使用
$http
保持在摘要周期内-快速解决方法是调用
$scope.$apply（）
在您的代码结束时触发摘要循环，但是重构以使用角度依赖将是最佳的操作选择。
谢谢您的回答。您介意告诉我应该如何进行吗？正如您可能从我的代码中看到的，我是AngularJS的初学者。@user3ffgfg50064——检查Angular的
$http
依赖关系--与jQuerys
$的工作原理非常相似。ajax
也提供了大量详尽的示例。
 <div ng-controller="rangeSort"> 
            <h3>Range Selection</h3>

            <div class="row">
                <div class="col-md-4">
                    <h5><b>Observer</b></h5>
                    <select class="form-control" ng-model="obSelection">
                        <option value="" >All</option>
                        <option ng-repeat="observer in observersS" value="{{observer}}">{{observer}}</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <h5> <b>Host</b></h5>
                    <select class="form-control" ng-model="hostSelection">
                        <option value="" >All</option>
                        <option ng-repeat="host in hostsS" value="{{host}}">{{host}}</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <h5> <b>Bug</b></h5>
                    <select id="chooseBug" class="form-control" ng-model="bugSelection">
                        <option value="" >All</option>
                        <option ng-repeat="bug in bugsS" value="{{bug}}" >{{bug}}</option>
                    </select>
                </div>
            </div>

            <!--div  ng-repeat="bugItem in bugsJSONList | filter: obSelection | filter: hostSelection | filter: bugSelection" > {{bugItem.bug}} on {{bugItem.host}} , observer {{bugItem.observer}} </div-->
            <div class="row">
                <div style="text-align: center; margin-bottom: 15px" ng-repeat="observer in observerKeys | filter: obSelection" > 
                    <h5><b> {{observer}}</b></h5>
                    <div class="row">
                        <div class="col-md-6" ng-repeat="host in hostKeys | filter: hostSelection" >
                            <br> <span style="text-decoration:underline"> Host {{host}} </span>
                            <div style="text-align: left" ng-repeat="bug in bugsS | filter: bugSelection" >
                                <div ng-repeat="item in JSONbugsList[observer][host][bug]">{{bug}} from {{item.start}} to {{item.end}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                var summaryApp = angular.module('summaryApp', []);
                summaryApp.controller("rangeSort", function($scope) {
                    hosts =[], observers =[], bugs =[], JSONbugsList =[];
                    hostKeys = [], observerKeys = [], bugKeys = [];

                    bugTracker = {};


                    $.getJSON('../java_output/bug_summary.json', function (data) {
                        JSONbugsList = data;
                        var numObservers = data.numObservers;
                        var bugTracker = {};
                        for (var observer = 1; observer <= numObservers; observer++) {
                            observers.push(observer);
                            observerKeys = Object.keys(data);
                            observerKeys.splice(observerKeys.indexOf('numObservers'));
                            for (var host in data["observer" + observer]) {
                                if (hosts.indexOf(host) == -1) {
                                    hosts.push(host);
                                }
                                hostKeys = Object.keys(data["observer" + observer]);
                                for (var bug in data["observer" + observer][host]) {
                                    if (bugs.indexOf(bug) == -1) {
                                        bugs.push(bug);  
                                    }
                                    for (var i in  data["observer" + observer][host][bug]) { 
                                        bugTracker[bug] = true;
                                        var dateVar = data["observer" + observer][host][bug][i];
                                        var intoList = {"observer":observer, "host":host, "bug":bug, "start":(new Date(1000*dateVar.start)), "end":(dateVar.end==null?' the end.':(new Date(1000*dateVar.end)))} 
                                        }
                                }
                            }
                        }

                        console.log ("host keys " + hostKeys);

                        var overviewVars = ['Congestion','Highlatency','LownumOIO'];
                        var overviewSpaceVars = ['Congestion','High latency','Low numOIO'];
                        for (var i in overviewVars) {
                            console.log (overviewVars[i]);
                            $('#' + overviewVars[i] + 'Content' ).append ('<p>There are' + ((bugTracker[overviewSpaceVars[i]])?' errors in ':' no errors in ') + overviewVars[i] + '.</p>');
                            $('#' + overviewVars[i] + 'Content' ).append ('<button type=\"button\" class=\"btn\" onclick=\"displayRanges('+overviewSpaceVars[i]+')\">View Bug Ranges</button>');
                        }

                        function displayRanges (bug) {
                            $('#chooseBug').val(bug);
                        }

                        //console.log(bugsCounter);
                        for (var i = 1; i <= numObservers; i++) {
                            $('#links').append('<a href=\"#observer' + i + '\">Observer ' + i + '   </a>');
                            if (i != numObservers) {
                                $('#links').append(' - ');
                            }
                        }
                        $scope.hostsS = hosts;
                        $scope.bugsS = bugs;
                        $scope.observersS = observers;
                        $scope.JSONbugsList = JSONbugsList;
                        $scope.hostKeys = hostKeys;
                        $scope.observerKeys = observerKeys;
                        $scope.start = 'start';
                        $scope.end = 'end';
                    });


                });

            </script>

            <hr>


        </div>