AngularJS ng-repeat default value does not work

Question

I am working with AngularJS and I am so new in that.

My aim is fill a tag SELECT with OPTION element from a datasource. That is what I do basically:

<script>

    function LocalizationController($scope, $http) {
        $scope.Regions = [
            { ID: "001", DESC: "DESC_1" },
              { ID: "002", DESC: "DESC_2" },
                 { ID: "003", DESC: "DESC_3" },
                    { ID: "004", DESC: "DESC_4" },
        ];

        $scope.Region = "003";
        $scope.init = function () {
            $scope.Region = "003";
        }
    }
</script>


<div ng-controller="LocalizationController" ng-init="init();">
    <input type="button" ng-click="Region='002'" value="test">
    <select id="region" name="RegionCode" ng-model="Region">
        <option ng-repeat="item in Regions" value="{{item.ID}}">{{item.DESC}}</option>
    </select>
</div>

Everything works good, the Select is fill of my items, but I would like to set default value.

How you can see - I set my object model which is ng-model="Region" - I set its default value into init() function by $scope.Region = "003"; when the SELECT is loaded I do not why but dafault value is the first one "001"

I also tried to change value manually by in that case the SELECT gets the right value selection.

Anyone can explain why it does not work?

I know that is a common problem, I am already looked for that, any solution suggestion to use NG-OPTION, that directive works good, it can fill my SELECT with my array of object, it can select default value, very nice but it does not solve my problem because the value into the the option element id an integer autoincrement which is not what I want.

so in summary:

NG-REPEAT can render the SELECT how I want but default value does not work NG-OPTIONS can render the SELECT how I want, default value works but the value into option item cannot be set how I want.

any suggestions?

thanks in advance

---

EDIT

---

I found a "solution"

<div ng-controller="LocalizationController" EXCLUDE-ng-init="init();"> 
     <select id="region" onload="alert();angular.element(this).scope().Region='002'"  name="RegionCode" ng-model="Region">
        <option ng-repeat="item in Regions" value="{{item.ID}}">{{item.DESC}}</option>
         {{init();}}
    </select>
</div>

I do not like so much but works pretty good: - ng-init="init();" does not work good - If we exclude the initialize of default value into ng-init so EXCLUDE-ng-init="init();" and put the initilize when option are loded it works

Have a look at the code blow, I put {{init();}} after ng-repeat. Everithing works good {{item.DESC}} {{init();}}

I do not think is the best solution but Works, 1) I have a droopdown fill of my elements 2) The value of option into my list is CORRECT, "001", "002" and not a stupid autoincremental value which is useless.

I hope that can help someone... THANKS TO EVERYONE TRIED TO HELP ME

---

Answer 1

Just use ng-options

<select id="region" name="RegionCode" ng-model="Region" ng-options="option.ID as option.DESC for option in Regions">

And do

$scope.init = function () {
    $scope.Region = $scope.Regions[2];
}

When you inspect the select box while using ng-options the values for the options will be like 0,1,2,3.., that is auto increment integer as you said. But don't worry about that. Its the value just for showing up there, but once you post your form you will get the right value as you possess, in your case ID.

Answer 2

use ng-options

and in this case if you play with object (not single values) it should be so

$scope.init = function () {
    $scope.Region = $scope.Regions[2];
}