AngularJS : Select with ng-options + 1 option in a div ng-repeat don't select the same default value

Question

I didn't found some code that can help me among all answers about the subject. My level in AngularJS is 0 so I don't understand the code too ^^

It's not my code : I have to debug/correct it : I have a ng-repeat and a button to add a div as many times I want. The initial div selected by default the first "Act" and the additionnal div has the first choice <option value="">Select</option> selected and that's what I want.

<div ng-repeat="item in vm.ListActs track by $index">
    <fieldset>
        <legend>Act {{$index + 1}}<i class="icon-close" ng-click="vm.DeleteAct($index)" ng-hide="$index === 0"></i></legend>
        <br />
        <div class="field selectField">
            <label for="selectgroupAct{{$index}}">
                TO <span class="obligatoire">*</span>
            </label>
            <select id="selectgroupAct{{$index}}"
                    name="selectgroupAct{{$index}}"
                    ng-options="act.Code as acte.Code for acte in vm.ListActsTO.Acts"
                    ng-disabled="vm.ListActsTO.Acts.length === 1"
                    ng-model="item.Code"
                    ng-change="vm.ActIndexChange($index, item.Code)"
                    required >
                    <option value="">Select</option>
            </select>
        </div>
    </fieldset>
</div>

Do you know why the initial select doesn't want to have the <option value="">Select</option> as the selected option ?

In the js I have this code:

(function () {
    'use strict';
    angular
        .module('SpaApp')
        .controller('myController', myController);

    myController.$inject = ['firstService', 'secondService', '$localStorage', '$location'];

    function myController(firstService, secondService, $localStorage, $location) {
        var $ctrl = this;

        angular.extend($ctrl, {
            ...methods declared
        });

        init();
        return $ctrl;


        function init() {
            angular.extend($ctrl, {
                ListActsTO: {},
                ListActs : []
            });

            getListActsTO();
            $ctrl.ListActs [0] = {
                Code: ""
            };
        }
        ...

I tried to add property selected in my option <option value="">Select</option> but it didn't work. I tried with https://docs.angularjs.org/api/ng/directive/select but I'm not good enough and after applying one, the other functionnalities I have didn't work anymore.

Thank you for your help

Answer 1

The ng-model is the key here. It says ' item.Code is the variable being tracked in this form element'.

 <select id="selectgroupAct{{$index}}"
 ...
 ng-model="item.Code"
 ...
 required >

That said, in your controller, you can simply initialize this variable to match the value, in this case an empty string.

  function myController(firstService, secondService, $localStorage, $location) {
    var $ctrl = this;
    $ctrl.item = {Code: ""}
    .....

(assuming you don't have other empty string values in your vm.ListActsTO.Acts array)