Javascript 在一个单词中只写一个粗体字母

我想知道如何在一个单词中只设置一个特定的字母，在我的例子中，第一个字母是angularJS。例如，我有一组单词，如：

var Words = [Mon,Tue,Wed];

<div ng-controller="MyCtrl">
  <div ng-repeat="Word in Words">
           <p>
             {{Word}}
           </p>
   </div>
</div>

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

function MyCtrl($scope) {
    $scope.Words = ['Mon','Tue','Wed'];
}

我想用粗体显示每个元素的第一个字母，用普通字体显示单词的其余部分。
当然，在视图中：

<div ng-repeat="value in Words">
    <b>{{value.substring(0,1)}}</b>{{value.substring(1)}}
</div>


{{value.substring（0,1）}{{{value.substring（1）}}
首字母加粗纯粹是视觉上的，因此它不应该反映在HTML中，而应该完全由CSS管理。这对于我们的文本的可访问性和可用性非常重要，同时也尊重

CSS用于向人类用户建议其演示

有一个名为
：：first-letter（：first-letter）
的属性，它工作得非常好，而且是

：：first letter CSS伪元素选择
块的第一行（如果前面没有任何其他内容）
（如图像或内联表）在其行上

下面是一个CSS示例

p:first-letter {
    font-weight: bold;
}

和一个JSFIDLE来执行一些测试：

希望这对您有用。
编辑：

使用：：第一个字母



CSS:


首字母加粗纯粹是视觉上的，因此它不应该反映在HTML中，而应该完全由CSS管理。这对我们的文本的可访问性和可用性很重要，所以我不太喜欢这个选项。所以，你应该要求CSS解决方案。原则上同意@sebastienbarbier，但OP确实特别要求AngularJS解决方案。这是解决原始问题的正确方法，而不是使用脚本。绝对优雅的解决方案，谢谢！我认为你的问题有一个根本性的缺陷，这不是AngularJS要解决的问题，而是一个相当简单的CSS问题。
var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.Words = ['Mon','Tue','Wed'];
}

.bold{

    font-weight:bold;
}