带有Bootstrap 4的AngularJS数据表-格式化问题

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

angular.module('myApp', []).controller('myController', function($scope) {
  // 定义数据表数据
  $scope.tableData = [
    { name: 'John', age: 25, gender: 'Male' },
    { name: 'Jane', age: 30, gender: 'Female' },
    { name: 'Bob', age: 35, gender: 'Male' }
  ];

  // 定义格式化方法
  $scope.formatGender = function(gender) {
    return gender === 'Male' ? '男性' : '女性';
  };
});

<div ng-app="myApp" ng-controller="myController">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in tableData">
        <td>{{row.name}}</td>
        <td>{{row.age}}</td>
        <td>{{formatGender(row.gender)}}</td>
      </tr>
    </tbody>
  </table>
</div>