AngularJS select option initialize - angularjs

Question

I have this select tag:
<select class="form-control" data-ng-model="contact.title" data-ng-options="title.title as title.title for title in titles track by title.title">
<option></option>
</select>
and when I will edit the title nothing is selected but contact.title is Mag.. Therefore Mag. should be selected. Does anyone know what I have to do in order that Mag. is selected?

Answer 1

From what I found tinkering around in a jsfiddle, the 'track by' was unnecessary.
Please try removing it.
<select class="form-control" data-ng-model="contact.title"
data-ng-options="title.title as title.title for title in titles">
<option></option>
</select>
Changing the 'track by' portion to $index or another value changes the selection. It's best to not use it if you are sure all titles will be unique.

Answer 2

Working code for me:
<select class="form-control" data-ng-model="contact" data-ng-options="title.title for title in titles track by title.title">
<option></option>
</select>
In controller:
$scope.titles = [{title: "abc"}, {title: "pqr"}, {title: "xyz"}];
$scope.contact = $scope.titles[0];
Try this.

Answer 3

Try this:
$scope.titles = [{title: "abc"}, {title: "pqr"}, {title: "xyz"}];
$scope.contact = {};
And:
<select name="repeatSelect" id="repeatSelect" ng-model="contact.title">
<option ng-repeat="title in titles" value="{{title.title}}">{{title.title}} </option>
</select>

Answer 4

Use the ng-init directive to have a default option in a select. You can use something like:
html:
<select ng-init="contact.title = titles[0]"
ng-model="contact.title"
ng-options="title.title for title in titles">
</select>
js:
$scope.titles = [{title: "Title A"}, {title: "Title B"}, {title: "Title C"}];

Answer 5

tl;dr
Set the initial value the model for contact in the controller, change the ng-model attribute of the select list to just contact and update the ng-options to data-ng-options="title as title.title for title in titles".
Selecting "Mag."
Does anyone know what I have to do in order that Mag. is selected?
In order to select Mag. (the first item in the list of titles, ensure that there is a property contact setup in the controller to the first element in the array of titles (i.e. $scope.contact = $scope.titles[0];). Also, change the ng-model attribute of the select from contact.title to contact.
ngOptions expression syntax
Also, review the syntax for comprehension_expression under the Arguments section of ngOptions.
The titles data sources is an array, so under array data sources, we have an expression like this format:
select as label for value in array
The value of select should not be the same as label. So update the ng-options attribute like this:
data-ng-options="title as title.title for title in titles track by title.title"
And as has already been mentioned, the track by clause is unnecessary. It would be useful if there was a different property we needed to account for (e.g. an integer named id). Thus the ng-options attribute can be simplified to:
data-ng-options="title as title.title for title in titles"
Example
See it demonstrated in the snippet below:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.titles = [{
title: "Mag."
}, {
title: "Mag.(FH)"
}, {
title: "Mag. Dr."
}, {
title: "Dr."
}];
$scope.contact = $scope.titles[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="form-control" data-ng-model="contact" data-ng-options="title as title.title for title in titles">
</select>
<div>Contact.title: <span ng-bind="contact.title"></span></div>
</div>
Avoid ngInit
It has been suggested that ng-init be used to set the initial value, however, there is a note about this on the documentation for ngInit:
This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.1
This is because (one of) the uses of controllers is to:
Set up the initial state of the $scope object.2
Business logic like that should not be added the template.