Angular ng-repeat get objects within arrays?

I'm using laravel 5.5 and I'm trying to retrieve the comments object

it shows the comments in the console just fine,

when I do this

<% post.comments.comment_body%> 

I don't get any content

when I do this

<% post.comments%> 

I get an array of objects pertaining to the comment. I'm trying to retrieve specific information but it is not showing.

here is what I have

Post Controller

public function getPosts()
{
    $posts = Post::with('user')
                 ->with(['likes' => function ($query) {
                            $query->whereNull('deleted_at');
                            $query->where('user_id', auth()->user()->id);
                        }])
                  ->with(['comments' => function($query) {
                        $query->where('user_id', auth()->user()->id);
                    }])
                    ->get();
    $response = new Response(json_encode($posts));
    $response->headers->set('Content-Type', 'application/json'); 


    $data = $posts->map(function(Post $post)
    { 
        $user = auth()->user();

        if($user->can('delete', $post)) {
            $post['deletable'] = true;
        }

        if($user->can('update', $post)) {
            $post['update'] = true;
        }

        $post['likedByMe'] = $post->likes->count() == 0 ? false : true;
        $post['likesCount'] = Like::where('post_id', $post->id)->get()->count();
        $post['createdAt'] = $post->created_at->diffForHumans();
        $post['createdAt'] = $post->updated_at->diffForHumans();


        return $post;
    });

    return response()->json($data); 
}

main.js

$scope.getPosts = function(){ 

    $http.get('/auth/posts').then(function(data){ 

            $scope.myposts = data.data;

            console.log(data.data); 
            }).then(function(result, status, header, config){ 

            }); 
    }; 




$scope.getPosts();

html

  <div id="mypost" class="col-md-8 panel-default" ng-repeat="post in myposts  ">
            <div id="eli-style-heading" class="panel-heading"><a class="link_profile" href="/profile/<% post.user.name | lowercase %>"><% post.user.name %></a></div>
            <div class="panel-body panel" ng-init="getLikeText(post); getLikecount(post)">  


            <i style="color:tomato; float:right; font-size:24px;" ng-click="like(post); toggle = !toggle" 
            ng-class="{[noheart] : !post.likedByMe, [heart]: post.likedByMe }">
                <h3 style="font-size:20px; margin:20px 0px; text-align:center;"  ng-bind="post.likesCount">   </h3>
            </i>


                <figure>
                    <p class="mybody2" ng-model="post.body" editable-text="post.body" e-form="textBtnForm"> <% post.body %></p>
                    <p name="post.created_at" ><% post.createdAt %> </p>
                </figure>
                <span>

                 <i style="color:red;" class="glyphicon glyphicon-remove" ng-click="deletePost(post)" ng-if="post.deletable"></i>


                      <button ng-if="post.update" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
                        Edit
                      </button>

                    <span><button ng-if="post.update" type="submit" class="btn btn-primary" ng-click="updatePost(post)">Update</button></span>
                </span>
            </div>

            <div id="comments" class="col-md-offset-2  panel-default">
                <div style="font-size:10px;" id="eli-style-heading" class="panel-heading"><h6><% post.comments[0].name %><h6></div>
                    <figure>
                        <p style="padding:10px; word-wrap:break-word;"> <% post.comments[0].comment_body%></p>
                    </figure>
                </div>
            </div>


        </div>