Angular infinite digest loop from ng model using getterSetter

Question

Here is the html:

<select style="width: 100%;" ng-model="vm.orgType" ng-model-options="{getterSetter: true}" ng-options="orgType as orgType.ORGANIZATION_TYPE for orgType in vm.orgTypes">
                                </select>

and here is the getter / setter function:

function orgType(selectedType) {
            if (arguments.length == 0)
                return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

            orgType.selectedOrgType = selectedType;
            if (selectedType.ORGANIZATION_TYPE_ID) {
                if (vm.registrant.StakeholderOrgs[0])
                    vm.registrant.StakeholderOrgs[0] = selectedType.ORGANIZATION_TYPE_ID;
                else
                    vm.registrant.StakeholderOrgs.push(selectedType.ORGANIZATION_TYPE_ID);
            }
            else
                vm.registrant.StakeholderOrgs.splice(0);
        }

following line:

return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

throws an endless digest cycle error.

Let me explain what I'm trying to do here. I need to click the identifier on the list if there is a choice made. I understand that I can just make an ng model for some variable selectedOrgTypeand then just put my logic in ng-change. However, I am trying to create a drop-down list that does not create unnecessary model variables. Instead, I was hoping to just put the logic in the getter / setter, which seems more appropriate to me. One of vm.orgTypes- { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }I was hoping that this would be my default value, instead I get this digest error, don’t understand where it comes from.

Answer 1

ng-model, angular , , - .

. javascript, , - false

({a:1} == {a:1}) // false

.

, getter, watch , , - false

, .

.

,

vm.orgTypes=[
    { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }
];

:

 return orgType.selectedOrgType || orgTypes[0];

: varible

var defaultSelect = { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

....

function orgType(selectedType) {
    if (arguments.length == 0)
        return orgType.selectedOrgType || defaultSelect;

, .