I am attempting to utilize angularJS to display div cards in rows of 3, but it's not working as expected. Instead of showing the cards in rows, it's displaying pure HTML where the object keywords in {{ }} are appearing as plain text. Below is all the relevant code.
Index.html
<!DOCTYPE html>
<html>
<head ng-app="inLineClient">
<meta charset="utf-8>
<title>Client App | InLine</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/src/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>
<script src="./src/app.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">InLine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<span class="navbar-text">
Welcome Back, User
</span>
</div>
</nav>
<div class="container">
<div class="row">
<h1 class="display-3">Current Conference: Conference</h1>
</div>
<div ng-controller="lineController as lineCtrl">
<div class="row" ng-repeat="line in lineCtrl.linesList track by $index" ng-if="$index % 3 == 0">
<div class="col-md-4" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-if="lineCtrl.linesList[i] != null">
<div class="card">
<div class="card-header">
{{line.name}}
</div>
<div class="card-body">
<p class="card-text">{{line.description}}</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">Time: {{line.time}}</li>
<li class="list-group-item">Number of People: {{line.numPeople}}</li>
<li class="list-group-item"><a href="#" class="card-link">Card link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/src/app.js
angular.module('inLineClient', [])
.controller('lineController', function($scope) {
$scope.linesList = [
{
name: 'Lunch',
description: 'Lunch time! Come down for some pizza, french fries and drinks!\nPrice: $10 for Pizza, Fries, and a Soft Drink',
time: new Date('October 21, 2017 12:30 EST-05:00').toLocaleTimeString('en-US'),
numPeople: null
},
{
name: 'VR Cave',
description: 'Reserve your slot to play in our VR Cave',
time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
numPeople: null
},
{
name: 'Breakfast',
description: 'Good Morning! Bagels and Cream Cheese with Coffee, Tea and Hot Chocolate this morning!',
time: new Date('October 22, 2017 8:30 EST-05:00').toLocaleTimeString('en-US'),
numPeople: null
},
{
name: 'Intro to RESTful APIs by RBC',
description: 'Learn about how to create REST APIs for your web application, brought to you by RBC',
time: new Date('October 21, 2017 17:30 EST-05:00').toLocaleTimeString('en-US'),
numPeople: null
},
{
name: 'Contest Programming',
description: 'Get your programming on by competing among different hackers to win a prize!',
time: new Date('October 22, 2017 0:30 EST-05:00').toLocaleTimeString('en-US'),
numPeople: null
}
];
});
If you have any suggestions or need further information, please leave a comment. Full repository available at https://github.com/khalid-talakshi/InLine