title: how to delete (splice) an element from nested JSON using AngularJS
body: <p>I have a nested JSON structured like this:</p>
  
  <pre><code>[{
  "phone_id" : "1",
  "phone_name" : "nokia",
  "phone_img" : "/src/imgs/nokia.jpg",
  "phone_comments" :
      [
                          {
                              "comment_id" : "1",
                              "user_id" : "32508",
                              "comment_date" : "2001-02-01",
                              "user_comment" : "This was the first phone that was rock solid from Nokia"
  
                          }, 
                          {
                              "comment_id" : "2",
                              "user_id" : "32518",
                              "comment_date" : "2001-02-02",
                              "user_comment" : "Great phone before the smartphone age"
  
                          },
                          {
                              "comment_id" : "3",
                              "user_id" : "22550",
                              "comment_date" : "2002-04-01",
                              "user_comment" : "Reminds me of my grandpa's phone"
  
                          },
                          {
                              "comment_id" : "4",
                              "user_id" : "31099",
                              "comment_date" : "2001-05-11",
                              "user_comment" : "It was a crappy one!"
  
                          }
                      ]
  }
  ]
  </code></pre>
  
  <p>Display part (works) - I m able to display the phone image on the 1st table column and on ng-click I load the second column with information about the phone with comments. This works perfectly fine. </p>
  
  <p>Deletion (not working) - I have question about deleting comments. I do not want to be delete the whole phone object, but only specific comments. Can I pass something like ???</p>
  
  <pre><code>remove(comment, $index) 
  </code></pre>
  
  <p>and then have a function that does the following?</p>
  
  <pre><code>$scope.remove = function (index, comments) {
      alert(comments.user_comment + index);
      $scope.comments.splice(index, 1);
  }
  </code></pre>
  
  <p>For reference, the HTML looks something like :</p>
  
  <pre><code>&lt;div ng-app="angularJSApp"&gt;
      &lt;div ng-controller="PhoneCtrl"&gt;
          &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
          &lt;table width="100%" border="1"&gt;
              &lt;tr ng-repeat="ph in phones"&gt;
                  &lt;td width="20%"&gt;&lt;a href="#" ng-click="showComments = ! showComments"&gt;&lt;img width="50%" ng-src="{{ph.phone_img}}"&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;p&gt;Phone Id: {{ph.phone_id}}&lt;/p&gt;
                      &lt;p&gt;Phone Name: {{ph.phone_name}}&lt;/p&gt;
                      &lt;p&gt;Number of comments: {{ph.phone_comments.length}}&lt;/p&gt;
  
                      &lt;div class="shComments" ng-show="showComments"&gt;
                          &lt;p&gt;Search: &lt;input ng-model="query"&gt;&lt;/p&gt;
                          &lt;table border="1" width="100%"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;&lt;a href="" ng-click="predicate = 'comment_id'; reverse = !reverse"&gt;Id&lt;/a&gt;&lt;/th&gt;
                                      &lt;th&gt;&lt;a href="" ng-click="predicate = 'user_comment'; reverse = false"&gt;Comment&lt;/a&gt;
                                          (&lt;a href="" ng-click="predicate = '-user_comment'; reverse = false"&gt;^&lt;/a&gt;)
                                      &lt;/th&gt;
                                      &lt;th&gt;&lt;a href="" ng-click="predicate = 'comment_date'; reverse = !reverse"&gt;Date&lt;/a&gt;&lt;/th&gt;
                                      &lt;th&gt;&lt;a href="" ng-click="predicate = 'user_id'; reverse = !reverse"&gt;User&lt;/th&gt;
                                      &lt;th&gt;&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr ng-repeat="comment in ph.phone_comments | filter:query | orderBy:predicate:reverse"&gt;
                                      &lt;th&gt;{{comment.comment_id}}
                                      &lt;th&gt;{{comment.user_comment}}&lt;/th&gt;
                                      &lt;th&gt;{{comment.comment_date}}&lt;/th&gt;
                                      &lt;th&gt;{{comment.user_id}}&lt;/th&gt;
                                      &lt;th&gt;&lt;button ng-click="remove($index, comment)"&gt;Remove Comment&lt;/button&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;                  
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>P.S: I have been experimenting with AngularJS and I m asking this after having looked for solutions as much as I can. Thanks for your help.</p>