Javascript asp.net angular app导航栏未更新

在我的应用程序中，我从服务器获取数据，包括菜单项。因此，每个项目都有自己的菜单项。问题是菜单项并没有按应有的方式更新。当我签入JS端时，菜单项会根据当前显示的项目进行更新，但视图（html）中的菜单项不会更新

这是我的html代码

    <div ng-app="WebInterfaceApp">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="owl-carousel visible-xs" carousel  ng-controller="HomeController">
            <carousel-item ng-repeat="page in movies.pages" ng-class="{'active': selectedMenu == page.name }" class="item sliderImage">
                <div id="sliderImage">
                    <a class="my_menu" data-toggle="tab" href="javascript:void(0)" ng-click="topMenuAction(page.name, $index)">{{page.name}}</a>
                </div>
            </carousel-item>
        </div>
    </nav>
    <ajaxloader></ajaxloader>

    <div id="ui-view" ui-view></div>
</div>

我的JS代码是这样的

angular.module('WebInterfaceApp', ['ui.router','youtube-embed','ngTouch'])
.config(['$stateProvider', '$locationProvider', '$httpProvider', function ($stateProvider, $locationProvider, $httpProvider) {
$stateProvider
.state('All', {
    url: '/:itemId',
    templateUrl: '/Home/Landing',
    controller: 'HomeController'
}).state('Landing', {
    url: '/',
    templateUrl: '/Home/Landing',
    controller: 'HomeController'
});

$locationProvider.html5Mode(true);
$httpProvider.defaults.timeout = 10000;
}])
.service('WebInterfaceService', ['$http', function ($http) {
console.log("webservice");
this.getTagItems = function (tag) {



    return fromAPi;
};
this.getTagItemPage = function (tag, page, pageNo) {
    return fromAPi;
};

this.startLoader = function () {
    $('ajaxLoader').css('position', 'absolute');
    $('ajaxLoader').height($('[ui-view]').height() < 100 ? $(window).height() : $('[ui-view]').height());
    $('ajaxLoader').width($('[ui-view]').width() < 100 ? $(window).width() : $('[ui-view]').width());
    $('ajaxLoader').html('<div style="z-index: 999;position: absolute;margin-top: 20%;margin-left: 50%;"><img src="~/Content/images/ajax-loader.gif" />LOADING...</div>').show();
};
this.stopLoader = function () {
    $('ajaxLoader').hide();
};

}])
.controller('HomeController', ['$rootScope', '$scope', '$location', 'WebInterfaceService', function ($rootScope, $scope, $location, WebInterfaceService) {    
$scope.flag = true;
if ($location.path() == '/') {
    $location.path('United Kingdom');
}
$scope.setData = function (data) {
    console.log(data);
    $scope.movies = data;
};
$rootScope.selectedMenu = 'Overview';
$scope.topMenuAction = function (name, index) {
    // Begin our infinite scroll from the top
    window.scrollTo(0, 0);
    $rootScope.selectedMenu = name;
    // Load sections for current page
    var page = $scope.movies.pages[index];
    page.sectionsLoaded = false;
    $scope.sectionManage(index);
    //window.scrollTo(0, 1); //TODO - needs to be fixed as doesn't work on a phone per Chrome 
};
$scope.linkAction = function (act) {
    $location.path(act);
};
$scope.tagAction = function (tag) {
    WebInterfaceService.getTagItems(tag)
        .success(function (tagItems) {
            $scope.movies = tagItems;
            var scope = angular.element($('[ng-controller="HomeController"]')).scope();
            scope.setData(tagItems);

            // Load sections for the first page
            $scope.sectionManage(0);
        })
        .error(function (error) {
            $scope.status = 'Unable to load movie data: ' + error.message;
            console.log($scope.status);
        });
};
$scope.tagAction($location);  
$scope.test =function(){
    console.log("hover");
};
$scope.pageManage = function(direction,page,index){
    if (page !== undefined && $scope.flag === true) {
        $scope.topMenuAction(page, index);
    }
    else{
        console.log("You are now in last/First");
    }
    console.log("direction-"+direction+'page-'+page);
};
// Function for loading sections for specific page in background
$scope.sectionManage = function (pageIndex) {

    // If index is out of bound, just return
    if (pageIndex >= $scope.movies.pages.length)
        return;
    // Internal loop function, which is called after every ajax request if we need to load more sections
    var loop = function () {
        var page = $scope.movies.pages[pageIndex];
        // Number of section which will be loaded next
        var pageNo = page.sections.length;
        // If we already loading some sections, or already loaded all available sections, just return
        if (page.loadingSections || page.sectionsLoaded)
            return;
        // Set this as true to avoid many background requests
        page.loadingSections = true;

        WebInterfaceService.getTagItemPage($location, pageIndex, pageNo)
        .success(function (sections) {
            // Add each received section to our page
            angular.forEach(sections, function (section) {
                page.sections.push(section);
            });
            // Set this as false to be able load new sections on the next time
            page.loadingSections = false;
            // If we get some sections
            if (sections.length > 0) {
                // And our bottom anchor is still visible (which means that we have empty space from the bottom)
                if ($scope.isBottomAnchorInViewport()) {
                    // Go to another iteration and call the function again
                    loop();
                }
            } else {
                // If we get empty sections array, that all available sections already loaded
                page.sectionsLoaded = true;
            }
        })
        .error(function (error) {
            $scope.status = 'Unable to load page data: ' + error.message;
            console.log($scope.status);
            page.loadingSections = false;
        })
    }
    // Trigger this function for first iteration
    loop();
};
// Function for checking that our bottom anchor is still visible or not (which means that we have empty space from the bottom)
$scope.isBottomAnchorInViewport = function () {
  /*  var rect = angular.element('#bottomAnchor')[0].getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight+500 || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    ); */
};

angular.module（'WebInterfaceApp'、['ui.router'、'youtube-embed'、'ngTouch']））
.config（['$stateProvider'、'$locationProvider'、'$httpProvider'，函数（$stateProvider、$locationProvider、$httpProvider）{
$stateProvider
.state（'全部'{
url:“/：itemId”，
templateUrl:“/Home/Landing”，
控制器：“HomeController”
}).州（‘登陆’{
url:“/”，
templateUrl:“/Home/Landing”，
控制器：“HomeController”
});
$locationProvider.html5Mode（true）；
$httpProvider.defaults.timeout=10000；
}])
.service（'WebInterfaceService'，['$http'，函数（$http）{
console.log（“webservice”）；
this.getTagItems=函数（标记）{
从API返回；
};
this.getTagItemPage=函数（标记、页面、页码）{
从API返回；
};
this.startLoader=函数（）{
$（'ajaxLoader'）.css（'position'，'absolute'）；
$（'ajaxLoader'）.height（$（'[ui视图]）.height（）<100？$（窗口）.height（）：$（'[ui视图]）.height（））；
$（'ajaxLoader'）.width（$（'[ui视图]）.width（）<100？$（窗口）.width（）：$（'[ui视图]）.width（））；
$（'ajaxLoader'）.html（'LOADING…'）.show（）；
};
this.stopLoader=函数（）{
$（'ajaxLoader'）.hide（）；
};
}])
.controller（'HomeController'、['$rootScope'、'$scope'、'$location'，'WebInterfaceService'，函数（$rootScope，$scope，$location，WebInterfaceService）{
$scope.flag=true；
如果（$location.path（）{
$location.path（“英国”）；
}
$scope.setData=函数（数据）{
控制台日志（数据）；
$scope.movies=数据；
};
$rootScope.selectedMenu='Overview'；
$scope.topMenuAction=函数（名称、索引）{
//从顶部开始我们的无限卷轴
滚动到（0，0）；
$rootScope.selectedMenu=名称；
//加载当前页面的节
var page=$scope.movies.pages[index]；
page.sectionsLoaded=false；
$scope.sectionManage（索引）；
//scrollTo（0，1）；//TODO-需要修复，因为每个Chrome在手机上不起作用
};
$scope.linkAction=函数（act）{
$location.path（act）；
};
$scope.tagAction=函数（标记）{
WebInterfaceService.getTagItems（标记）
.成功（功能（标记项）{
$scope.movies=tagItems；
var scope=angular.element（$（'[ng controller=“HomeController”]'））.scope（）；
范围.设置数据（标记项）；
//加载第一页的节
$scope.sectionManage（0）；
})
.错误（函数（错误）{
$scope.status='无法加载电影数据：'+错误消息；
log（$scope.status）；
});
};
$scope.tagAction（$location）；
$scope.test=函数（）{
控制台日志（“悬停”）；
};
$scope.pageManage=函数（方向、页面、索引）{
如果（第！==未定义&&$scope.flag==真）{
$scope.topMenuAction（第页，索引）；
}
否则{
log（“您现在处于最后/第一位”）；
}
console.log（“方向-”+方向+“页面-”+页面）；
};
//用于在后台加载特定页面的节的函数
$scope.sectionManage=函数（页面索引）{
//如果索引超出范围，只需返回
如果（pageIndex>=$scope.movies.pages.length）
返回；
//内部循环函数，如果需要加载更多节，则在每次ajax请求后调用该函数
变量循环=函数（）{
var page=$scope.movies.pages[pageIndex]；
//下一个将加载的节数
var pageNo=page.sections.length；
//如果我们已经加载了一些节，或者已经加载了所有可用的节，只需返回
如果（第页加载部分| |第页部分已添加）
返回；
//将此设置为true以避免许多后台请求
page.loadingSections=true；
WebInterfaceService.getTagItemPage（$location，pageIndex，pageNo）
.success（功能部分）{
//将收到的每个部分添加到我们的页面
角度。forEach（节，函数（节）{
页面.节.推送（节）；
});
//将此设置为false，以便下次能够加载新节
page.loadingSections=false；
//如果我们得到一些部分
如果（截面长度>0）{
//我们的底部锚仍然可见（这意味着我们从底部有空的空间）
如果（$scope.isBottomAnchorInViewport（））{
//转到另一个迭代并再次调用该函数
loop（）；
}
}否则{
//如果我们得到空节数组，那么所有可用的节都已加载
page.sectionsLoaded=真；
}
})
.错误（函数（错误）{
$scope.status='无法加载页面数据：'+错误消息；
log（$scope.status）；
page.loadingSections=false；
})
}
//在第一次迭代中触发此函数
loop（）；
};
//用于检查底部锚是否仍然可见的函数（这意味着底部有空空间）
$scope.isBottomAnchorInViewport=函数（）{
/*var rect=angular.element（'#bottomAnchor'）[0]。getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
rect.bottom Try
$scope.$apply（）；
在$scope.setData函数中设置电影变量的位置？我在setData函数中尝试过，但没有成功。它开始在co上显示错误