Angular View not updating in html after updating the $scope variable

[Abhijeet Kumar]

I've faced some problems regarding updating the view once the $scope variable is updated. 

I have a simple HTML code like this:

<a ng-repeat="data in dataset">

     <i class="material-icons md-light toolbar-btn spot {{data.value1}}">{{data.value2}}</i>

     {{data.value3}}

</a>

Now the problem is, the <i> tag is not showing inside the HTML view but the {{data.value3}} is showing up.

Once I add push some value to dataset array, everything starts working. i've even tried $scope.$apply() but it's not fixing the issue.

Can someone help me with this problem?

[Sander Elias]

use ng-class

[Abhijeet Kumar]

Hi, thanks for the quick reply.

I used it but it doesn't seem to work and that doesn't seem to be the problem. The problem is something else.

Here's the DOM generated after the page loads.

<div class="toolbar-content reset-hotspots" style="display: block;">

    <!-- ngRepeat: hotspot in hotspots -->
       <a href="" ng-repeat="hotspot in hotspots" class="ng-scope">

             <i class="hotspot-1 material-icons md-light toolbar-btn spot ">info</i>

       </a>
    <!-- end ngRepeat: hotspot in hotspots -->

</div>

But once I update the $scope variable, it changes to this.

<div class="toolbar-content reset-hotspots" style="display: block;">

     <!-- ngRepeat: hotspot in hotspots -->
           <a href="" ng-repeat="hotspot in hotspots" class="ng-scope">

                                

           </a>
     <!-- end ngRepeat: hotspot in hotspots -->

</div>

I console logged the value after changing and it contains one element in the array $scope.hotspots. But when I push something to this array from js, it changes to this.

<div class="toolbar-content reset-hotspots" style="display: block;">

     <!-- ngRepeat: hotspot in hotspots -->
          <a href="" ng-repeat="hotspot in hotspots" class="ng-scope">

                                

          </a>
     <!-- end ngRepeat: hotspot in hotspots -->

          <a href="" ng-repeat="hotspot in hotspots" class="ng-scope">

                <i class="hotspot-2 material-icons md-light toolbar-btn spot selected" style="color: white;">info</i>

          </a>
     <!-- end ngRepeat: hotspot in hotspots -->

</div>

I'm not sure if it's some concept that I don't know or if there is some error in my code.

The data in first element is present, I added some value from array[0] element's object directly in DOM like this {{hotspot.Value}} and it was working. But just the material icon is not populating.

Thank you

On Tuesday, September 17, 2019, at 5:59:12 PM UTC+5:30, Sander Elias wrote:

use ng-class

[Dattaram Hodawadekar]

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
     
<h3>FIFA Mactch Summary:</h3>

<div ng-app="myApp" ng-controller="myCtrl">
 <ul>
        <li ng-repeat="data in dataset">
         <i class="material-icons {{data.value2}}">{{data.value2}}</i>
         </li>
    </ul>
</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
 
$scope.dataset = [{"value1":"face","value2":"phone","value3":"info"}];
console.log($scope.dataset)

});

</script>