JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<div ng-app="app">
    <div>
        <div ui-view></div>
    </div>
</div>

CSS

span {
    display: block;
    background-color: dodgerblue;
    margin: 0.5em;
    color: white;
    width: 5em;
}

JavaScript

var app = angular.module('app',
    [
        'ui.router'
    ]);

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('default', {
        url: '*path',
        controller: 'ctrl',
        template: '<button ng-click="add()">Add Value</button><span ng-repeat="value in vals">{{ value.value }}</span>'
    });
}]);

app.run(['$rootScope', function ($rootScope) {
    $rootScope.values = [{'id': 1, 'value': 'A'}, {'id': 2, 'value': 'B'}, {'id': 3, 'value': 'C'}]
}]);

app.controller('ctrl', ['$scope', '$rootScope', '$state', function($scope, $rootScope, $state) {
    
    $scope.vals = angular.copy($rootScope.values)
   
    $scope.add = function() {
        $rootScope.values.push({'id': 4, 'value': 'Added'})
        $state.go($state.current, {}, { reload: true });
    }
}]);