AngularJS showing the difference when using "track by" and not using it

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js" data-require="angular.js@1.6.0" data-semver="1.6.0"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>The Amazing Select Lists</h1>
    <div ng-app="MyApp">
      <div ng-controller="SLController">
        <!-- Track by... -->
        <p>Track By</p>
        <select ng-model="SelectedGender" ng-options="gen as gen.Display for gen in Genders track by gen.Code"></select>
        <br />
        <!-- NON - Track by... -->
        <p>NON - Track By</p>
        <select ng-model="SelectedGender" ng-options="gen as gen.Display for gen in Genders"></select>
      </div>
    </div>
  </body>

</html>

// Code goes here
var myApp = angular.module("MyApp", []);

myApp.run();

myApp.controller('SLController', function($scope, GenderService){
  $scope.Genders = GenderService.GetGenders();
  // A different object to the one created in the GenderService (below)
  $scope.SelectedGender = {
    Code: "M",
    Display: "Male"
  };
});

myApp.service("GenderService", function() {
  var genders = [{
    Code: "M",
    Display: "Male"
  }, {
    Code: "F",
    Display: "Female"
  }];
  
  this.GetGenders = function() {
    return genders;
  };
})

/* Styles go here */