push object to an array not working in angular js

Question

I want to push an object to a array . But Its not happening. I am pushing the object comments (values of forms) on submit click, to dish.comments of dishDetailController. ng-controller="DishCommentController" is nested inside ng-controller="dishDetailController" Where am I going wrong ?

main.html

 <div class="row row-content" ng-controller="dishDetailController as menuCtrl"> <div class="col-xs-12"> <ul class="media-list"> <li class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object img-thumbnail" ng-src={{menuCtrl.dish.image}} alt="Uthappizza"> </a> </div> <div class="media-body"> <h2 class="media-heading">{{menuCtrl.dish.name}} <span class="label label-danger">{{menuCtrl.dish.label}}</span> <span class="badge">{{menuCtrl.dish.price | currency}}</span></h2> <p>{{menuCtrl.dish.description}}</p> </div> </li> {{menuCtrl.dishes}} </ul> </div> <div class="col-xs-9 col-xs-offset-1"> <div class="media-right"><h3 class="media-right">Customer Comments &nbsp; &nbsp; &nbsp;<small>Sort By: <input type="text" ng-model="sort"></small></h3></div><br> <ul ng-repeat="comments in menuCtrl.dish.comments | orderBy:sort"> <blockquote> <div class="media-body"> <h3 class="media-heading">{{comments.rating}} Stars</h3> <h4 class="media-heading"></h4> <p>{{comments.comment }}</p> <footer>{{comments.author}},<cite title="Source Title">{{comments.date | date:'MMM,dd,yyyy'}}</cite></footer> <p><li></li></p> </div> </blockquote> </ul> </div> <div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController as comment"> <blockquote> <div class="media-body"> <h3 class="media-heading">{{star}} Stars</h3> <h4 class="media-heading"></h4> <p>{{comm }}</p> <footer>{{name}},<cite title="Source Title">{{}}</cite></footer> <p><li></li></p> </div> </blockquote> <ul class="list-unstyled"> </ul> <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate> <p><label>Your Name </label> <input type="TextField" name="name" ng-model="name" style="width:600px;"></p> <p><label>Number of Stars </label><span class="radio_star" ng-init="star=5"> <input type="radio" ng-model="star" value="1">1 <input type="radio" ng-model="star" value="2">2 <input type="radio" ng-model="star" value="3">3 <input type="radio" ng-model="star" value="4">4 <input type="radio" ng-model="star" value="5" checked> 5 </span> </p> <p><label style="vertical-align:top;">Your Comments </label> <textarea ng-model="comm" rows="4" cols="70"></textarea> </p> <p> <input type="button" ng-click="submitComment()" value="Comment" /> </p> </form> </div> 

app.js

 'use strict'; angular.module('confusionApp',[]) .controller('dishDetailController', ['$scope', function($scope) { var order=""; var dish={ name:'Uthapizza', image: 'images/uthapizza.png', category: 'mains', label:'Hot', price:'4.99', description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', comments: [ { rating:5, comment:"Imagine all the eatables, living in conFusion!", author:"John Lemon", date:"2012-10-16T17:57:28.556094Z" }, { rating:4, comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", author:"Paul McVites", date:"2014-09-05T17:57:28.556094Z" }, { rating:3, comment:"Eat it, just eat it!", author:"Michael Jaikishan", date:"2015-02-13T17:57:28.556094Z" }, { rating:4, comment:"Ultimate, Reaching for the stars!", author:"Ringo Starry", date:"2013-12-02T17:57:28.556094Z" }, { rating:2, comment:"It's your birthday, we're gonna party!", author:"25 Cent", date:"2011-12-02T17:57:28.556094Z" } ] }; this.dish = dish; }]) .controller('DishCommentController', ['$scope', function($scope) { //Step 1: Create a JavaScript object to hold the comment from the form $scope.submitComment = function () { var d = new Date(); var n = d.toISOString(); alert($scope.star); var comment={ comment:$scope.comm, rating:$scope.star, author:$scope.name, date:new Date().toISOString()}; alert('toto'); //Step 2: This is how you record the date // "The date property of your JavaScript object holding the comment" = new Date().toISOString(); alert(comment); // Step 3: Push your comment into the dish's comment array $scope.dish.comments.push(comment); alert($scope.name); //Step 4: reset your form to pristine //Step 5: reset your JavaScript object that holds your comment }; }]) ; 

Answer 1

if I am not mistaken then you have never created the variable $scope.dish, but only the variable var dish = ..., thus you can't assign anything ;-)

Answer 2

Happened across this when looking for javascript examples on clearing arrays. This question is from an assignment due for a Coursera Course on Angular JS.

You should not need to use "as MenuCtrl" when initializing the ng-controller if using $scope properly. This is covered in the course and I recommend reviewing the material again. It will be very difficult to resolve the question since only part of the solution is implemented.