JavaScript - Angular app not working

Question

I am new to Javascript and I cannot get my singular angular app to work. I have included the angular controller and module, and all the dependencies required, but all I get on the front view is the img alt attribute.

Here is my code.

        <div class="col-xs-12">
            <div class="media"> 
                <div class="media-left media-middle">
                    <a href="#"></a>
                    <img class="media-object img-thumbnail" ng-src="{{dish.image}}" alt="Uthapizza">
                 </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> 
            </div>
            </div>

<script src="../bower_components/angular/angular.min.js"></script>

var app = angular.module('confusionApp', []);
 app.controller('dishDetailController', function() {

    var dish={
                      name:'Uthapizza',
                      image: 'images/uthapizza.png',
                      category: 'mains', 
                      label:'Hot',
                      price:'4.99',
                      description:'xyz
                        };
        this.dish = dish;

    });


</script>

Answer 1

There are few issues with your code

(i)Your Object is not valid , change it as,

 var dish={
             name:'Uthapizza',
             image: 'images/uthapizza.png',
             category: 'mains', 
             label:'Hot',
             price:'4.99',
             description:'xyz'
  };

(ii) You should use controller as Syntax, so change it as

 <div ng-app="confusionApp" ng-controller="dishDetailController as dish" class="col-xs-12">

(iii) Also change your expressions as <p>{{dish.dish.description}}</p>

DEMO

var app = angular.module('confusionApp', []);
app.controller('dishDetailController', function() {
    var dish={
             name:'Uthapizza',
             image: 'images/uthapizza.png',
             category: 'mains', 
             label:'Hot',
             price:'4.99',
             description:'xyz'
        };
    this.dish = dish;
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="confusionApp" ng-controller="dishDetailController as dish" class="col-xs-12">
    <div class="media">
        <div class="media-left media-middle">
            <a href="#"></a>
            {{dish.dish}}
            <img class="media-object img-thumbnail" ng-src="{{dish.dish.image}}" alt="Uthapizza">
        </div>
        <div class="media-body">
            <h2 class="media-heading">{{dish.dish.name}}</h2>
                <span class="label label-danger">{{dish.label}}</span>
                <span class="badge">{{dish.dish.price}}</span>
             
            <p>{{dish.dish.description}}</p>
        </div>
    </div>
</div>