Q:

css property vs angularjs filter

In an angularjs app, I need to convert a string to upper case.
I have 2 options which give the same result. However, I would want to know in which scenarios one could be preferred over the other primarily w.r.t. performance.
Option 1 CSS text-transform property
<!DOCTYPE html>
<html>
<head>
<body>
<div style ="text-transform: uppercase">The text-transform uppercase Property</div>
</body>
</html>

Option 2 Angularjs filter
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>

<div ng-app="myApp" ng-controller="caseCtrl">
    {{txt | uppercase}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('caseCtrl', function($scope) {
    $scope.txt = "Angularjs uppercase filter";
});
</script>

</body>
</html>

A:

Use CSS to change the way it is presented when it is a matter of presentation. For example, when you are rendering all headings in UPPER CASE as a stylistic choice.
Use JavaScript to change the text itself when the case has meaning. For example when displaying serial codes where people may have entered lower case letters by mistake.

