JSFiddle - React, Tailwind, and code Playground

by Abhishek Sinha

HTML

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div>            
            <select ng-model="incorrectlySelected"
                ng-options="opt.role_id as opt.display_name for opt in options track by opt.role_id">
            </select>
        </div></div>
        
        </body>

JavaScript

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

  $scope.options = [{"role_name":"project_manager","display_name":"project manager","role_id":"123"},
{"role_name":"team_lead","display_name":"team lead","role_id":"124"},
{"role_name":"recruiter","display_name":"recruiter","role_id":"125"},
{"role_name":"sr_manager","display_name":"senior manager","role_id":"126"}];
    
  // 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 };
  $scope.incorrectlySelected = {"role_name":"project_manager","display_name":"project manager","role_id":"123"};
    
  // Here we are referencing the same object, so Angular inits the select box correctly
  // $scope.correctlySelected = $scope.options[1];
 // $scope.correctlySelected = 2;
});