JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div>
            <h2>Incorrect</h2>
            <p>We might expect the select box to be initialized to "two," but it isn't because these are two different objects.</p>
            <select ng-model="incorrectlySelected"
                ng-options="opt for opt in options">
            </select>

            The value selected is {{ incorrectlySelected.value }}.
        </div>
        <div>
            <h2>Correct</h2>
            <p>Here we are referencing the same object in <code>$scope.correctlySelected</code> as in <code>$scope.options</code>, so the select box is initialized correctly.</p>
            <select ng-model="correctlySelected"
                ng-options="opt as opt.label for opt in options">
            </select>

            The value selected is {{ correctlySelected.value }}.
        </div>

    </div>
</body>

JavaScript

angular.module('demoApp', []).controller('DemoController', function($scope) {

  $scope.options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
         11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
    
  // Although this object has the same properties as the one in $scope.options,
  // Angular considers them different because it compares based on reference
  $scope.incorrectlySelected = { label: 'two', value: 2 };
    
  // Here we are referencing the same object, so Angular inits the select box correctly
  $scope.correctlySelected = $scope.options[1];
});