I am currently working on an application where Users have the ability to switch between kilometers and miles for unit distances. To handle this, I created a custom filter that converts the distances accordingly:
app.filter('distance', function() {
return function(input, scope) {
var distanceName = (scope.units.distance === 'km') ? 'km' : 'ml';
// By default, scope.units.value is set to 1000 for kilometers and 621 for miles.
return (input / scope.units.value).toFixed(2) + distanceName;
};
});
Implementing this filter in my template is as simple as writing:
{{ point.distance | distance }}
However, I encountered an issue when trying to update the $scope.units.value. The filter does not automatically reflect this change, even though I expected Angular to handle it.
Upon changing the value, the digest cycle begins but using $scope.$apply() results in an error. How can I resolve this issue and ensure that the filter updates correctly?