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.toString(), 
                index: i
            }
        );        
    }
    
    $scope.currentObject = {};
    
    $scope.loadFirst = function () {
        // Change this to load $scope.myObjects[0] to see the issue.
        $scope.currentObject = $scope.myObjects[0];    
    };
    $scope.loadFirst();
    
    $scope.nextObject = function (i) {
        if (i< $scope.myObjects.length -1 ) {
            $scope.currentObject = $scope.myObjects[i + 1];
        } else {
            $scope.currentObject = $scope.myObjects[0];
        }
    };
}]);