JSFiddle - React, Tailwind, and code Playground

by Danish Farman

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 as opt.label 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 = [
      { label: 'Please select a value first', value: 0 },
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];
   $scope.incorrectlySelected = $scope.options[0];
  // 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];
});