JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app="myApp" ng-controller="carController">
    
    <select ng-options="value as desc for (desc, value) in carOptions" ng-model="currentObject.car"></select>
    

    <br />
    <br />
    car {{currentObject.car}} for index {{currentObject.index}}
    <br />
    <br />
    <button ng-click="loadFirst()">load first</button>
    <button ng-click="nextObject(currentObject.index)">next</button>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('carController', [ '$scope', function ($scope) {
    
    $scope.carOptions = {
        "red car": 0,
        "blue car": 1,
        "green car": 2,
        "orange car": 3
    };
    
    $scope.myObjects = [];
    
    for (var i = 0; i < 4; i++) {
        $scope.myObjects.push(
            { 
                car: i, 
                index: i
            }
        );        
    }
    
    $scope.currentObject = {};
    
    $scope.loadFirst = function () {
        // Change this to load $scope.myObjects[0] to see the issue.
        $scope.currentObject = $scope.myObjects[1];    
    };
    
    $scope.nextObject = function (i) {
        $scope.currentObject = $scope.myObjects[i + 1];
    };
}]);