Attempting to develop a prototype restaurant app using Angular/Ionic 1. Created a modal for adding comments and pushing them to a json server. Struggling to render the new comment on the HTML page after successful addition to the json file. The page freezes after closing the modal. Need assistance in displaying the newly added comment.

Below is the modal HTML code:

    <ion-modal-view>
<ion-header-bar>
  <h1 class="title">Add Comments</h1>
   <div class="buttons">
        <button class="button button-stable button-clear" ng-click="closeComment()">Close</button>
    </div>
</ion-header-bar>

  <ion-content>
    <form id="addCommentForm" name="addCommentForm" ng-submit="submitComments()">
    <div class="list">
        <label class="item item-input item-select">
            <span class="input-label">Rating</span>
            <select ng-model="mycomment.rating">
                <option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">
                    {{n}}</option>
            </select>
        </label>
        <label class="item item-input">
             <span class="input-label">Name</span>
            <input type="text" ng-model="mycomment.author">
        </label>
        <label class="item item-input">
            <span class="input-label">Comment</span>
            <textarea placeholder="" ng-model="mycomment.comment"></textarea>
        </label>
        <label class="item">
             <button class="button button-block button-positive" type="submit">Add Comment</button>
        </label>
    </div>
</form>
</ion-content>

Controller code as below:

     $scope.mycomment = {rating:5, comments:"", author:"", date:""};

           $ionicModal.fromTemplateUrl('templates/dish-comment.html', {
              scope: $scope,
              animation: 'slide-in-up'
            }).then(function(modal) {
              $scope.addComment = modal;
            });
            $scope.openComment = function() {
              $scope.addComment.show();
              $scope.popover.hide();
            };

            $scope.closeComment = function() {
              $scope.addComment.hide();
            };


            $scope.submitComments = function () {

            $scope.mycomment.date = new Date().toISOString();
            console.log($scope.mycomment);

            $scope.dish.comments.push($scope.mycomment);
         menuFactory.getDishes().update({id:$scope.dish.id},$scope.dish);


            $scope.mycomment = {rating:5, comment:"", author:"", date:""};
            $scope.addComment.hide();
        }
            $scope.$watch('dish.comments', function() {
                $scope.test = $scope.dish.comments;
                console.log($scope.test);
                });

Displaying the content on the HTML page:

    <div class="card">
      <div class="item item-body item-text-wrap">
           <img class="full-image" ng-src="{{baseURL+dish.image}}" alt="Uthappizza">
            <h2>{{dish.name}}
             <span style="font-size:75%">{{dish.price | currency}}</span>
            <span class="badge badge-assertive">{{dish.label}}</span></h2>
            <p>{{dish.description}}</p>
      </div>
  </div>
  <div class="row">
        <div class="col col-offset-10">
               <h4>Customer Comments &nbsp;&nbsp;&nbsp;
                   <small>Sort by: &nbsp;
                         <input type="text" ng-model="orderText">
                      </small></h4>
                <ul class="list">
                    <li ng-repeat="comment in dish.comments | orderBy:orderText">
                      <blockquote>
                         <p>{{comment.rating}} Stars</p>
                         <p>{{comment.comment}}</p>
                         <footer>{{comment.author}}, {{comment.date | date:'MMM. dd, yyyy'}}</footer>
                      </blockquote>
                    </li>
                </ul>
        </div>
  </div>

JSON file:

     {
"id": 3,
"name": "ElaiCheese Cake",
"image": "images/elaicheesecake.png",
"category": "dessert",
"label": "",
"price": "2.99",
"description": "A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms",
"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"
  },
  {
    "rating": "3",
    "comments": "Wonderful",
    "author": "Henna",
    "date": "2017-01-12T11:20:04.825Z"
  }
]

Experience the issue via recording of the app screen:

    https://i.sstatic.net/2lQhI.gif