JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
  <div ng-controller="ctrl as vm">
    <ul>
      <li ng-repeat="p in ProductItems">{{p.id + ' ' + p.name}}</li>
    </ul>

  </div>
</div>

JavaScript

angular.module('app', [])
  .controller('ctrl', function(dataService, $scope) {
    var vm = this;
    $scope.ProductItems = [];

    dataService.getProducts()
      .then(function(data) {
        $scope.ProductItems = data;
      });
  })
  .factory('dataService', ['$http', '$q', function($http, $q) {

    function getProducts() {
      var deferred = $q.defer();

      $http.get('https://httpbin.org/get')
        .then(function successCallback(response) {

          if (typeof response.data === 'object') {
            // let say we get list of Products
            deferred.resolve([{
              id: 1,
              name: 'Product1'
            }, {
              id: 2,
              name: 'Product2'
            }, {
              id: 3,
              name: 'Product3'
            }]);
          } else {
            // invalid response
            return "Invalid data";
          }
        }, function errorCallback(response) {
          return deferred.reject("Invalid data");
        })

      return deferred.promise;
    }

    return {
      getProducts: getProducts
    };
  }]);