angularjs ng-model(s) $scope - angularjs

Question

I'm quite new in AngularJs, I just started to learn this World today. I think I got the point, but I do not understand the next problem.
I have a site which contains a lot of select input fields. I will explain my problem with two select fields
********** THE HTML FILE *************
enter code here
<div id="FormContainer" ng-app="PermissionsApp">
<div class="permission_container" ng-controller="PermsCtrl">
<select id="select_all" ng-model="select_all_var" ng-change="UpdateAll()">
<option value="" ng-hide="true">-</option>
<option value="0">-</option>
<option value="n">no</option>
<option value="a" ng-selected="true">all</option>
<option value="g">group</option>
<option value="o">own</option>
</select>
<select id="select_1_1" ng-model="select_1_1_var" ng-change="Update(1, 1)">
<option value="" ng-hide="true">--</option>
<option value="n">no</option>
<option value="a" ng-selected="true">all</option>
<option value="g">group</option>
<option value="o">own</option>
</select>
</div>
</div>
************** THE JS FILE **************
enter code here
var permissionsApp = angular.module("PermissionsApp", []);
permissionsApp.controller("PermsCtrl",['$scope', function($scope) {
$scope.UpdateAll = function () {
console.log($scope.select_all_var + " - " + $scope.select_1_1_var);
}
$scope.Update = function (modul_id, action_id) {
console.log($scope.select_all_var + " - " + $scope.select_1_1_var);
}
}]);
OK ...
FIRST ISSUE
IF I change FIRST the select_all field after page reload, I get the next on the console: g - undefined
After that I change the select_1_1 field, I get the next on the console: g - g
SECOND ISSUE
If I change FIRST the select_1_1 fieldl after page reload I get the next on the console: undefined - g
After that I change the select_all field, I get the next on the console: g - g
SO ... it seems for me the variables can be seen in the $scope just after the change event .... do I need to declare the variables first time, or what's the problem? But I there are about 200 select fields on the page ... I do not want to declare them one by one.
Thanks for your answers in advance!
FF

Answer 1

So there are 2 ways to fix this:
ng-init
You can initialize your model to the desired value using:
<select ng-model="select_1_1_var"
ng-init="select_1_1_var = 'a'">
I don't use ng-selected much so I'm not familiar with its inner workings, but I would make an educated guess that this works solely on the UI and that it argues with other directives regarding initializing model values.
example - https://plnkr.co/edit/eO60jeXIKlDhAFuopnUc?p=preview
ng-options
So there has been a lacking feature (in my opinion) that you couldn't initialize a select control with a pre-existing model value when declaring your option elements. This is especially problematic when trying to use ng-repeat. It is recommended that you use ng-options and set your options via the controller as well as initialize your model values there:
<select id="select_all"
ng-model="select_all_var"
ng-options="opt.value as opt.name for opt in opts"
ng-change="UpdateAll()">
</select>
example - https://plnkr.co/edit/M4qZEL4Y8EfRtabfSN8a?p=preview
bonus
If you want to display an empty option without muddying up your options array, please visit my answer here - Why does AngularJS include an empty option in select?