SPECIALS FOR {{ TODAY | DATE }} is appearing after placing ng-app and ng-controller in the index.html file

Hi team,

        After placing the ng-app and ng-directives in their respective places inside index.html file, I am still not getting the date after declaring to the Date object in MainController.js file. Below are the files having codes:


var app = angular.module("PizzaPlanetApp", []);

MainController.js :

app.controller("MainController", ['$scope', function($scope) { $scope.today = new Date(); $scope.appetizers = [ { name: 'Caprese', description: 'Mozzarella, tomatoes, basil, balsmaic glaze.', price: 4.95 }, { name: 'Mozzarella Sticks', description: 'Served with marinara sauce.', price: 3.95 },{ name: 'Bruschetta' description: 'Grilled bread garlic, tomatoes, olive oil.' price: 4.95 } ]; }]);

index.html :

<!doctype html> <html> <head> <link href="https://content.codecademy.com/projects/bootstrap.min.css" rel="stylesheet" /> <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'> <link href="css/main.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> </head> <body ng-app="PizzaPlanetApp"> <div class="header"> <h1><span>Pizza</span><span>Planet</span></h1> </div> <div class="main" ng-controller="MainController"> <div class="container"> <h1>Specials for {{ today | date }}</h1> <h2>Appetizers</h2> <div class="appetizers row" ng-repeat="appetizer in appetizers"> <div class="item col-md-9"> <h3 class="name">{{appetizer.name}}</h3> <p class="description">{{appetizer.description}}</p> </div> <div class="price col-md-3"> <p class="price">{{appetizer.price}}</p> </div> </div> </div> </div> <div class="footer"> </div> <!-- Modules --> <script src="js/app.js"></script> <!-- Controllers --> <script src="js/controllers/MainController.js"></script> </body> </html>

Here is the link of the exercise :


Please suggest what should I do to resolve this issue.