My application makes a get request using Angular's http service and then loops over the returned data to display an unordered list in the view. However, I am facing an issue where the data is available after the get request but is not being displayed on the page. It seems like a CSS styling problem, but I'm unsure of how to resolve it. I want to show the unordered list within a bootstrap panel as the body.
Here is the angular code inside the controller for setting up the data:
$http.get('/messages').success(function(data) {
console.log("Messages are "+data);
$scope.records = data;
});
Below is the HTML structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Bootstrap News plugin</title>
<!-- Other meta tags and links -->
</head>
<body ng-app="mean" ng-controller="MainCtrl">
<!-- Body content with container, rows, panels, etc. -->
<div class="row">
<div class="col-md-2 col-md-offset-1 ">
<form name="messageForm" novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
<!-- Form elements -->
</form>
</div>
</div>
</body>
</html>