JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp">
  <div ng-controller="MainCtrl">
    <div ng-repeat="item in mainItems track by $index"> {{item.name}}</div>
    <input ng-model="item.name"/>
    <button ng-click="addItem(item)">Add</button>
    
  </div>
</div>

JavaScript

angular.module('myapp.services', [])

.factory('MainService', function() {

orderItems = [];
    
    var cloneObj = function(obj) {
        var newObj = {};
        var keys = Object.keys(obj);
        var len = keys.length;
        while(len--) {
            newObj[keys[len]] = obj[keys[len]];
        };
        return newObj;
    };
    
return {
   all: function() {
       return orderItems;  // Why does return a char array???
   },
   getCount: function(item){
      var count = 0;
      for (i = 0;i<orderItems.length;i++) {
        if (orderItems[i] === item ){
          count++;
        }
      }
     return count;
   },
   addItem: function(item) {
      orderItems.push(cloneObj(item));
       item = {};
   }
  }
});

angular.module('myapp.controllers', ['myapp.services'])
.controller('MainCtrl', function($scope, MainService) {
  $scope.mainItems = MainService.all(); // Why does this return a char array?
  $scope.item = {name : ''};
  // get the count
  $scope.getCount = function(item){
      return MainService.getCount(item);
  }

  // add an item
  $scope.addItem = function(item){
      MainService.addItem(item);
      $scope.mainItems = MainService.all();
      console.log($scope.mainItems);
      $scope.item = {};
      return MainService.getCount(item);
  }

});



angular.module('myapp',['myapp.controllers','myapp.services']);