Bolt Network - Codecademy app not interpreting as it should - html

Question

<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-3" class="series_img">
</div>
<div class="col-md-6">
<h1 class="series">{{ program.series }}</h1>
<h2 class="episode">{{ program.episode }}</h2>
<p class="description">{{ program.description }}</p>
</div>
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item"><span>Date:</span>{{ program.datetime | date }} </li>
<li class="list-group-item"><span>On air:</span>{{ program.datetime | day }} </li>
<li class="list-group-item"><span>Time:</span>{{ program.datetime | time }} </li>
<li class="list-group-item"><span>Season:</span>{{ program.season }} </li>
<li class="list-group-item"><span>Genre:</span>{{ program.genre }} </li>
</ul>
</div>
</div>
</div>
</div>
CONTROLLER
app.controller('MainController', ['$scope', function($scope) {
$scope.program = {
series: "Sherlock",
series_img: "img/sherlock.jpg",
genre: "Crime drama",
season: 3,
episode: "The Empty Hearse",
description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
}
}]);
APP
var app = angular.module('BoltNetworkApp', []);
This is what it displays
Here is what it should display
What am I doing wrong? Please help and explain simply as I am a novice. Please and thank you!

Answer 1

if you made this
Make a new folder js/directives/. Inside this folder, create a file js/directives/programListing.js. In this file,create a new directive named programListing:
Use app.directive to create the new directive
Use restrict to create a new Element
Use scope to specify that we'll pass information into this directive through an attribute named listing
Use templateUrl to tell this directive to use the js/directives/programListing.html file
2.
Include this new JavaScript file in the view as a element.
3.
Next, write the directive's template. Make a new file js/directives/programListing.html. Move the HTML from index.html inside the .content div into the directive's template file.
4.
The programListing directive takes in information through the listing attribute. The data in listing becomes available to use in the directive's template. Update the expressions in the directive's template so that it uses listing to display each item.
5.
In the view, use the directive to display the details of program.
6.
Add another object to the controller. Feel free to use your favorite TV show.
7.
Use another directive to display the details of the new object.
change : {{ program.datetime | date }}
to : {{{{ listing.datetime | date }}}}