I think I have a logic issue with my Angular that I need some help on. We have a service that connects to a DB that gets saved values so our Angular form can get the values and use them. That is all set up.

My issue is, in our form we have 1 radio button list using an ng-repeat to generate the list and 3 dropdown lists. Our dropdown lists are triggering and update function to update the values of themselves. We are showing and hiding the dropdown menus based on the radio button lists selection (I will post the code). This should be noted we are using Umbraco CMS that this control is being used for, but this is not the actual issue.

The issue is, we console our response the value of the radio button list outputs fine to the selection we chose, BUT when I select one of the dropdown list items, the value of the dropdown list returns to the previously selected value. Any help figuring this out would be greatly appreciated.

Code is below:

my.controller.js

angular.module("umbraco")
    .controller("Our.GalaxyEventSelectorController", function ($scope,       $routeParams, notificationsService, GalaxyEventSelectorResource) {
    $scope.emptyList = [{}];
    $scope.ETypeRadio = { 0: "NA", 1: "RepeatingTimedEvent", 2: "RepeatSingleDayEvent", 3: "SingleTimedEvent" };
    GalaxyEventSelectorResource.getEventById($routeParams.id,    $scope.model.alias).then(function (response) {
        // console.log("REsponse: " + response);
        console.log("intial load on DOM load")
        var resp = (response.data.indexOf("{") > -1 ? angular.fromJson(JSON.parse(response.data)) : "");

        $scope.previousSelectedTypeOfEvent = (resp == "" ? "" : resp.TypeOfEvent);
        $scope.previousSelectedEventTypeId = (resp == "" ? 0 : resp.EventTypeId);
        $scope.previousSelectedEventName = (resp == "" ? "" : resp.EventName);
        $scope.previousSelectedEventId = (resp == "" ? 0 : resp.EventId);
        $scope.previousSelectedEventDate = (resp == "" ? "" : resp.EventDate);
        //This loads the selection the initial time.
        $scope.selectedTypeOfEvent = $scope.previousSelectedTypeOfEvent;  //THIS Gets the previous radio button selection

        //init EventTypeId dropdown
        var initIdx = 0;
        $scope.getEventTypeIds(true, initIdx);


    }).then(function() {
        //init Name dropdown
        var initIdx = -1;
        $scope.getEventNames(true, initIdx, $scope.previousSelectedEventTypeId);

    }).then(function () {
        //init EventIds and Dates dropdowns
        var initIdx = -1;
        $scope.getEventIdsAndDates(true, initIdx, $scope.previousSelectedEventName);
        $scope.getEventDatesOnly(true, initIdx, $scope.previousSelectedEventName);

    }).then(function () {
        // init model values
        $scope.typeOfEventRadioSelected($scope.previousSelectedTypeOfEvent);
         $scope.updateModelValue(
            $scope.previousSelectedTypeOfEvent,
            $scope.previousSelectedEventTypeId,
            $scope.previousSelectedEventName,
            $scope.previousSelectedEventId,
            $scope.previousSelectedEventDate);
    });

$scope.updateModelValue = function (typeOfEvent, eventTypeId, eventName, eventId, eventDate) {
    $scope.model.value = {
        TypeOfEvent: typeOfEvent,
        EventTypeId: eventTypeId,
        EventName: eventName,
        EventId: eventId,
        EventDate: eventDate
    }
    console.log("Scope load and scope change");
    console.log($scope.model.value);
};

//not used...attempting to make the visual nice onscreen but causes unpredictable loss of data.  could be useful
$scope.addSpacesToCamelCase = function(txt) {
    return txt.replace(/([a-z])([A-Z])/g, "$1 $2");
}

$scope.typeOfEventRadioSelected = function(selectedTypeOfEvent) {
    //triggered when radio button selected.
    var typeOfEvent = selectedTypeOfEvent;
    var eventTypeId = $scope.selectedGalaxyEventTypeId != null
        ? $scope.selectedGalaxyEventTypeId.EventTypeId
        : "";

    var eventName = "";
    var eventId = "";
    var eventDate = "";
    var initIdx = -1;

    $("#GalaxyEventNameDdl").show();
    $("#GalaxyEventIdDdl").show();
    $("#GalaxyEventDatesDdl").show();

    switch (selectedTypeOfEvent) {
        case "NA":
            $scope.getEventNames(false, initIdx, eventTypeId);
            $scope.GalaxyEventIdsAndDates = $scope.initial;
            $scope.GalaxyEventDates = $scope.initial;

            $("#GalaxyEventNameDdl").hide();
            $("#GalaxyEventIdDdl").hide();
            $("#GalaxyEventDatesDdl").hide();
            break;
        case "RepeatingTimedEvent":
            //$scope.getEventNames(false, initIdx, eventTypeId);
            eventName = $scope.selectedGalaxyEventName != null 
                ? $scope.selectedGalaxyEventName.EventName
                : "";
            $scope.GalaxyEventIdsAndDates = $scope.initial;
            $scope.GalaxyEventDates = $scope.initial;

            $("#GalaxyEventIdDdl").hide();
            $("#GalaxyEventDatesDdl").hide();
            break;
        case "RepeatSingleDayEvent":
            //$scope.getEventNames(false, initIdx, eventTypeId);
            eventName = $scope.selectedGalaxyEventName != null
                ? $scope.selectedGalaxyEventName.EventName
                : "";
            $scope.getEventDatesOnly(false, initIdx, eventName);
            eventDate = $scope.selectedGalaxyEventDates != null
                ? $scope.selectedGalaxyEventDates.EventDate
                : "";
            $scope.GalaxyEventIdsAndDates = $scope.initial;

            $("#GalaxyEventIdDdl").hide();
            break;
        case "SingleTimedEvent":
            //$scope.getEventNames(false, initIdx, eventTypeId);
            eventName = $scope.selectedGalaxyEventName != null
                ? $scope.selectedGalaxyEventName.EventName
                : "";
            $scope.getEventIdsAndDates(false, initIdx, eventName);
            eventId = $scope.selectedGalaxyEventId != null
                ? $scope.selectedGalaxyEventId.EventId
                : "";
            eventDate = $scope.selectedGalaxyEventDates != null
                ? $scope.selectedGalaxyEventDates.EventDate
                : "";
            $scope.GalaxyEventDates = $scope.initial;

            $("#GalaxyEventDatesDdl").hide();
            break;
    }

$scope.updateModelValue(
        typeOfEvent,
        eventTypeId,
        eventName,
        eventId,
        eventDate
    );
};

$scope.eventTypeIDSelected = function (selectedEventTypeId) {
    console.log("Event Type ID selected");
    //triggered when EventTypeId dropdown is changed.  update the datatype value & provide names in name dropdown
    var initIdx = -1;
    $scope.getEventNames(false, initIdx, selectedEventTypeId.EventTypeId);
    $scope.GalaxyEventIdsAndDates = $scope.initial;// NOT WORKING TO WIPE THE LIST...WHY?
    $scope.GalaxyEventDates = $scope.initial;  // NOT WORKING TO WIPE THE LIST...WHY?
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        selectedEventTypeId.EventTypeId,
        "",
        "",
        "");
};

$scope.eventNameSelected = function (selectedName) {
    //triggered when eventName dropdown is changed.  update the datatype value & provide dates and ids in dropdowns
    var initIdx = -1;
    $scope.getEventIdsAndDates(false, initIdx, selectedName.EventName);
    $scope.getEventDatesOnly(false, initIdx, selectedName.EventName);
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        $scope.selectedGalaxyEventTypeId.EventTypeId,
        selectedName.EventName,
        "",
        "");
};

$scope.eventIdSelected = function (selectedEventId) {
    //triggered when eventId dropdown is changed.  update the datatype value & init date dropdown
    var initIdx = -1;
    $scope.getEventDatesOnly(false, initIdx, $scope.selectedGalaxyEventName.EventName);
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        $scope.selectedGalaxyEventTypeId.EventTypeId,
        $scope.selectedGalaxyEventName.EventName,
        selectedEventId.EventId,
        selectedEventId.EventDate);
};

$scope.eventDatesSelected = function (selectedEventDate) {
    //triggered when eventDate dropdown is changed.  update the datatype value & init Id dropdown
    var initIdx = -1;
    $scope.getEventIdsAndDates(false, initIdx, $scope.selectedGalaxyEventName.EventName);
    $scope.updateModelValue(
        $scope.selectedTypeOfEvent,
        $scope.selectedGalaxyEventTypeId.EventTypeId,
        $scope.selectedGalaxyEventName.EventName,
        "",
        selectedEventDate.EventDate);
};

$scope.getEventTypeIds = function (initVal, idx) {
    GalaxyEventSelectorResource.getEventIds().then(function (eventTypeIds) {
        $scope.GalaxyEventTypes = eventTypeIds.data;
        console.log("successfully retrieved galaxyeventids");
            //console.log("Event Type IDs:", eventTypeIds.data[0]);

        if (initVal) {
            $scope.GalaxyEventTypes.some(function (x, i) {
                if (x.EventTypeId == $scope.previousSelectedEventTypeId) {
                    idx = i;
                    return true;
                }
            });
        }
        $scope.selectedGalaxyEventTypeId = $scope.GalaxyEventTypes[idx];


    },
        function (data) {
            console.log("failed to retrieve galaxyeventids");
        });

};

$scope.getEventNames = function (initVal, idx, eventTypeId) {
    GalaxyEventSelectorResource.getEventNamesByEventId(eventTypeId).then(function (eventNames) {
        $scope.GalaxyEventNames = eventNames.data;
        console.log("successfully retrieved galaxyeventnames");
        if (initVal) {
            $scope.GalaxyEventNames.some(function (x, i) {
                if (x.EventName == $scope.previousSelectedEventName) {
                    idx = i;
                    return true;
                }
            });
        }
        $scope.selectedGalaxyEventName = $scope.GalaxyEventNames[idx];


    },
        function (data) {
            console.log("failed to retrieve galaxyeventnames");
        });

};

$scope.getEventIdsAndDates = function(initVal, idx, eventName) {
    GalaxyEventSelectorResource.getEventIdsAndDatesByEventName(eventName).then(function (eventIds) {
            $scope.GalaxyEventIdsAndDates = eventIds.data;
            console.log("successfully retrieved galaxyIdsanddates");
            if (initVal) {
                $scope.GalaxyEventIdsAndDates.some(function(x, i) {
                    if (x.EventId == $scope.previousSelectedEventId) {
                        idx = i;
                        return true;
                    }
                });
            }
            $scope.selectedGalaxyEventId = $scope.GalaxyEventIdsAndDates[idx];
        },
        function(data) {
            console.log("failed to retrieve galaxyIdsanddates");
        });
};

$scope.getEventDatesOnly = function (initVal, idx, eventName) {
    GalaxyEventSelectorResource.getEventDatesByEventName(eventName).then(function (eventDates) {
        $scope.GalaxyEventDates = eventDates.data;
        console.log("successfully retrieved galaxydates");
        if (initVal) {
            $scope.GalaxyEventDates.some(function (x, i) {
                if (x.EventDate == $scope.previousSelectedEventDate) {
                    idx = i;
                    return true;
                }
            });
        }

            $scope.selectedGalaxyEventDates = $scope.GalaxyEventDates[idx];
        },
        function (data) {
            console.log("failed to retrieve galaxydates");
        });

};

EventSelector.html

 <div ng-controller="Our.GalaxyEventSelectorController">
<h5>Select Type of Event</h5>

<!--<div>-->

    <div ng-repeat="n in ETypeRadio">
        <!-- need to use ng-click as an ng-change on an ng-repeat element does not work -->
      <!-- <input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}-->
        <input type="radio" ng-model="selectedTypeOfEvent" name="tOfE" ng-click="typeOfEventRadioSelected(selectedTypeOfEvent)" ng-value="{{n}}" value="{{n}}" />{{n}}
    </div>

<!--</div>-->
<h5>Galaxy Event Type</h5>
<select ng-model="selectedGalaxyEventTypeId" ng-change="eventTypeIDSelected(selectedGalaxyEventTypeId)" ng-options="eventType.EventTypeId + ' - ' + eventType.EventTypeIdDescription for eventType in GalaxyEventTypes track by eventType.EventTypeId"></select>
<br/>
<div id="GalaxyEventNameDdl">
    <h5>Galaxy Event Name</h5>
    <select ng-model="selectedGalaxyEventName" ng-change="eventNameSelected(selectedGalaxyEventName)" ng-options="name.EventName for name in GalaxyEventNames">
        <option value=""> --- Select Event Name ---</option>
    </select>
    <br />
</div>
<div id="GalaxyEventIdDdl">
    <h5>Galaxy Event Id</h5>
    <select data-ng-model="selectedGalaxyEventId" ng-change="eventIdSelected(selectedGalaxyEventId)" ng-options="id.EventId + ' - ' + id.EventDate for id in GalaxyEventIdsAndDates track by id.EventId">
        <option value=""></option>
    </select>
    <br />
</div>
<div id="GalaxyEventDatesDdl">
    <h5>Galaxy Event Date</h5>
    <select data-ng-model="selectedGalaxyEventDates" ng-change="eventDatesSelected(selectedGalaxyEventDates)" ng-options="date.EventDate for date in GalaxyEventDates">
        <option value=""></option>
    </select>
</div>

We have a .resource.js but this is just performing gets to load our original data from our service.

  angular.module("umbraco.resources").factory("GalaxyEventSelectorResource", function ($http) {
var galaxyEventService = {};

galaxyEventService.getEventIds = function () {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetAllEventTypeIDs");
};

galaxyEventService.getEventById = function (id, propertyType) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventById?id=" + id + "&propertyType=" + propertyType);
};

galaxyEventService.getEventNamesByEventId = function(eventId) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventNamesByEventId?eventId=" + eventId);
};

galaxyEventService.getEventIdsAndDatesByEventName = function(eventName) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventIdsAndDatesByEventName?eventName=" + eventName);
};

galaxyEventService.getEventDatesByEventName = function(eventName) {
    return $http.get("/umbraco/backoffice/api/GalaxyEventSelector/GetEventDatesByEventName?eventName=" + eventName);
};