<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="app.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<td>ID</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in data">
<td>{{ data.id }}</td>
<td>
<span ng-if="data.gender=='male'"><i class="fas fa-male fa-2x"></i></span>
<span ng-if="data.gender=='female'"><i class="fas fa-female fa-2x"></i></span>
</td>
</tr>
</tbody>
</table>
</div>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'base.html',
controller: 'route1_controller'
});
});
app.controller('route1_controller', function($scope) {
$scope.data = [{'id':'1','gender':'male'}, {'id':'2','gender':'male'}, {'id':'3','gender':'female'}, {'id':'4','gender':'female'}, {'id':'5','gender':'male'}];
});