View not updating when value changes - angularjs

Question

I am working with angularjs 1.6, leaflet and mapbox. I am trying to recreate a box whose value changes based on which polygon you are hovering over in an angularjs way. The behaviour I want to recreate is in this example
http://leafletjs.com/examples/choropleth/
You can see the value in the box in the top right of the map changes based on which polygon you are hovering over. When I try to recreate it in an angular way, the view does not update but I can see the value in my component updating.
html:
<div class="data">{{vm.polygonValue}}</div>
Controller (same as the highlight feature in the example):
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 3,
color: '#666',
fillOpacity: 0.5
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
addValue(layer.feature.properties);
}
function addValue(props){
vm.polygonValue = props.value;
}
All runs in the controller and I can see the vm.polygonValue change when you hover over a polygon but the view doesn't change. Can someone help? Wondering is it because the value changes too frequently or something and angular cant handle it?

Answer 1

Probably your function is triggered outside of the angular digest cycle, to notify angular about changes you need to execute it within $scope.$apply function.
Something like $scope.$apply(() => addValue(layer.feature.properties)) should work. You can find out more about $apply in the docs: https://code.angularjs.org/1.6.9/docs/api/ng/type/$rootScope.Scope#$apply