I'm facing an issue while attempting to create a simple exercise. It seems like I may not be calling the controller variable correctly, which is causing me to be stuck. How can I troubleshoot and fix this code? The output page is displaying: {{dish.name}} {{dish.label}} {{dish.price | currency}}
<html lang="en" ng-app="a">
<head>.... </head>
<body>
<div class="container">
<div class="row row-content" ng-controller="dishDetailController as dishDC">
<div class="col-xs-12">
<p>Insert the dish details here</p>
<div class="media-body">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishDC.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="a">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p>Add comments here</p>
</div>
</div>
</div>
<script src="../bower_components/angular/angular.min.js"></script>
<script>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
var dishes={
name:'a',
image: 'images/a.png',
category: 'a',
label:'a',
price:'7.88',
description:'a',
};
this.dishes = dishes;
});
</script>
</body>
</html>