JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div class="approach" ng-controller="ProductionCtrl1">
        <div class="title">Approach 1: Push new data into orders array</div>
    <button type="button" ng-click="refreshOrders();">Click to Refresh Orders List</button>
    <div>
        Orders:
        <div ng-repeat="order in orders">{{order.id}}: {{order.item}}</div>
    </div>
    </div>

<div class="approach" ng-controller="ProductionCtrl2">
    <div class="title">Approach 2: Create new object to hold orders array</div>
    <button type="button" ng-click="refreshOrders();">Click to Refresh Orders List</button>
    <div>
        Orders:
        <div ng-repeat="order in periodData.orders">{{order.id}}: {{order.item}}</div>
    </div>
    </div>
</div>

CSS

button {
    margin-bottom: 10px;
    padding: 2px 6px;
}
.approach {
    border: 1px solid #bbb;
    margin-bottom: 20px;
}
.title {
    background-color: #eee;
    border-bottom: 1px solid #bbb;
    margin-bottom: 10px;
    padding: 2px 4px;
}

JavaScript

var dummyOrdersDataFromDb = [
    { id: 0, item: 'fork' },
    { id: 1, item: 'spoon' },
    { id: 2, item: 'knife' }
];

// Service for Approach 1: Push new data into orders array
function PeriodDataService1 ($http) {
    var periodData = {};

    periodData.refresh = function(user) {
        $http.post('/echo/json', { route:'period', id: 0 })
        .success(function (data){
            periodData.orders.length = 0; // empty current array
            
            // push the returned orders data into orders array
            dummyOrdersDataFromDb.forEach(function (item, index) {
                periodData.orders.push(item);
            });
        });
    };
    
    periodData.orders = [];
    periodData.period = 1;
    
    return periodData;
}

// Service for Approach 2: Create new object to hold orders array
function PeriodDataService2 ($http) {
    var periodDataSvc = {};
    
    // create data object to hold service data
    periodDataSvc.periodData = {
        orders: [],
        period: 1
    };

    periodDataSvc.refresh = function(user) {
        $http.post('/echo/json', { route:'period', id: 0 })
        .success(function (data) {
            // set orders array equal to returned data array
            periodDataSvc.periodData.orders = dummyOrdersDataFromDb;
        });
    }
    
    return periodDataSvc;
}

// Controller for Approach 1
function ProductionCtrl1($scope, PeriodDataService1) {
    // set scope property pointing to orders array
    $scope.orders = PeriodDataService1.orders;
    
    $scope.refreshOrders = function () {
        PeriodDataService1.refresh({});
    };
}

// Controller for Approach 2
function ProductionCtrl2($scope, PeriodDataService2) {
    // set scope property pointing to parent object of orders array
    $scope.periodData = PeriodDataService2.periodData;
    
    $scope.refreshOrders = function () {
        PeriodDataService2.refresh({});
    };
}

angular.module('app', [])
.factory('PeriodDataService1',...