custom list – Call all the versions of a SharePoint comment’s field with AngularJS


So I’ve found a way to do this.
When I make the call (or request) of the SharePoint list, I just did another one inside the modal’s function to call the version history of the selected item.

HTML:
I make an ng-repeat of the elements requested and put an ng-click to open the modal when you click on the item’s title

<table>
   <tr>
      <th>ID</td>
      <th>name</th>
   </tr>
   <tr ng-repeat="x in data">
      <td>{{x.ID}}</div>
      <td ng-click="showDetails(x)">{{x.LinkTitle}}</div>
   </tr>
</table>

JS:
A normal http request. And in the Modal’s function I make the request for the version history

$http({
   method: "GET",
   url: "https://myDomain.com/sites/mySite/_api/web/lists/getByTitle('MyListName')/items?$select=*,LinkTitle,&$top=10000",
   headers: { "Accept": "application/json; odata=verbose" }
}).then(function onSuccess(response) {
   $scope.data = response.data.d.results;
         
   //Code that opens the modal when a certain item is clicked
   $scope.showDetails = function(x){

      //Request the versions of the clicked item. Notice in the URL I put the ID of current clicked item
      $http({
         method: "GET",
         url: "https://myDomain.com/sites/mySite/_api/web/lists/getbytitle('MyListName')/items(" + x.ID + ")/versions",
         headers: { "Accept": "application/json; odata=verbose" }
      }).then(function onSuccess(response) {
         $scope.versionsData = response.data.d.results;
      });

      $scope.x = x;
      $('#myModal').modal('show');
   }
});

Here is the modal’s HTML, I’m using Bootstrap’s modal.
I’ve made a list within a list. In the Comments I put an ng-repeat for the versions, filtering only the ones where the “comments” changed (with ng-if).

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <div class="modal-body">
            <ul class="detail-view">
               <li><b>Title</b></li>
               <li>{{x.LinkTitle}}</li>
               <li><b>Comments</b></li>
               <ul>
                  <li ng-repeat="f in versionsData" ng-if="f.Comments">
                     <!-- I tried to replicate the way SharePoint shows the info (with name, date and comment --->
                     {{f.Editor.LookupValue}} ({{f.Modified | date: 'MM/dd/yyyy'}}): {{f.Comments}}
                  </li>
               </ul>
               <li><b>Status</b></li>
               <li>{{x.Status}}</li>
                .
                .
                .
            </ul>
         </div>
      </div>
   </div>
</div>