Javascript array in object empty when passed to function

Question

I have a web page that opens an modal page when clicked on "edit". Situation: With an Angular JS ng-repeat I show a list of objects named customer;

<div class="col-sm-6" ng-repeat="Cust in Customers | filter: filterCustomers">
//code omitted for clarity
<buton class="btn btn-default btn-xs" ng-click="openEditDialog(Cust);">Edit<i class="fa fa-pencil pull-right"></i></buton>

The object customer is setup this way;

{
"ID" : 1,
"Name" : "Test",
"City" : "Test",
"CountryCode" : "NLD",
"CurrencyCode" : "EUR",
"empAgencies" : [{
        "ID" : 1,
        "Name" : "Test",
        "NumberOfEmployees" : 0,
        "customers" : []
    }, {
        "ID" : 2,
        "Name" : "Test1",
        "NumberOfEmployees" : 0,
        "customers" : [{
                "ID" : 4,
                "Name" : "TestC",
                "City" : "Test",
                "CountryCode" : "NLD",
                "CurrencyCode" : "EUR",
                "empAgencies" : []
            }
        ]
    }
]
}

Please note that Customer<->EmpAgency is a many to many relationship in my MVC, I don't know if this has anything to do with the problem. The problem is in the openEditDialog(Cust); function

 function openEditDialog(Cust) {
         $scope.editedCustomer = Cust;
         console.log($scope.editedCustomer);
         $uibModal.open({
             templateUrl: 'scripts/spa/customer/editCustomerModal.html',
             controller: 'editCustomerCtrl',
             scope: $scope
         }).result.then(function ($scope) {
             search($scope.page);
         }, function () {
             search($scope.page);
         });
     }

The following object is passed to this function:

Object {ID: 1, Name: "Test", City: "Test", CountryCode: "NLD", CurrencyCode: "EUR"…}
//omitted
empAgencies:Array[0]

As you can see the Array containing empAgencies is emptied for some reason. Because of this my dropdownbox selected property is not populated properly.(contains the complete list of empAgencies)

Answer 1

just remove $scope from the callback:

         }).result.then(function () {
             search($scope.page);
         }, function () {
             search($scope.page);
         });
     }

Answer 2

I've found the solution; My dropdownbox on the modal page has a new list of empAgencies. My ng-model is editedCustomer.empAgencies. Because there is nothing selected in my dropdownbox the customer object automatically loses its value.

I still have to see how I will solve this to get the selected value in my select right.

(edit) I have solved this in the following way; Because it was a many to many relationship I had to make the arrays the same:

   var array = new Array();
    for (var i = 0; i < $scope.AgencyDropDown.length; ++i) {
        array.push({
            ID : $scope.AgencyDropDown[i].ID,
            Name : $scope.AgencyDropDown[i].Name
        });
    }
    $scope.AgencyDropDownSubSet = array;
    var array1 = new Array();
    for (var i = 0; i < $scope.editedCustomer.empAgencies.length; ++i) {
        array1.push({
            ID : $scope.editedCustomer.empAgencies[i].ID,
            Name : $scope.editedCustomer.empAgencies[i].Name
        });
    }
    $scope.editedCustomer.empAgencies = array1;

Now the objects are the same the selected item will be filled correctly. Even when I add new variables to the empAgency this select box will keep working.