将HTML页面添加到div

Question

I have angular template , which has a div. I am trying to load html view ( .html ) page to the div based on a $watch. But, It never loads the html view to the div. Here is my controller , I am only posting the part of the code that loads the html view.

   var filtertemplate = "#locationChart_right";
$scope.templateUrl = '/_layouts/AngularControls/MyController/Views/MyChart.html';
$scope.$watch("currentItem", function () {

        $scope.currentConfig = $rootScope.currentItem;
        LocDetailsChartService.getUserPrefs()
        .then(function (response) {
            var data = response.data.ChartsUserPrefs;
            $scope.MeritType = data.MeritType;
            if ($scope.MeritType !== undefined) {
                if ($scope.MeritType == "Score") {
                    $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyScoreChart.html");
                }
                if ($scope.MeritType == "Potential") {
                    $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyPercentChart.html");
                }
            }
           // $scope.radioButtonHandler($scope.MeritType);
        });
});

Here is my HTML.

<div class="locationChart_container"> 
<div class="locationChart_left">
</div>
<div class="locationChart_right">
</div>

Can anybody suggest me where I am doing the mistake , if possible please let me know if there is a angular way of doing this.

Answer 1

You need to add $scope.$apply() or inject $timeout and add it to the code to notify angular of your changes

   var filtertemplate = "#locationChart_right";
   $scope.templateUrl = '/_layouts/AngularControls/MyController/Views/MyChart.html';
   $scope.$watch("currentItem", function () {

    $scope.currentConfig = $rootScope.currentItem;
    LocDetailsChartService.getUserPrefs()
    .then(function (response) {
        var data = response.data.ChartsUserPrefs;
        $scope.MeritType = data.MeritType;
        if ($scope.MeritType !== undefined) {
            if ($scope.MeritType == "Score") {
                $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyScoreChart.html");
                $scope.$apply()
            }
            if ($scope.MeritType == "Potential") {
                $(filtertemplate).load("/_layouts/AngularControls/MyController/Views/MyPercentChart.html");
                $scope.$apply()
            }
        }
       // $scope.radioButtonHandler($scope.MeritType);
    });
});