Editing an item with a select that's populated asynchronously

Question

I have a table of items that I need to edit. When edit is clicked, another controller (EditCtrl) edits it. EditCtrl retrieves a list of possible values with an ajax call. The problem I'm having is the dropdown menu doesn't have the item that is selected.

See in this example http://plnkr.co/edit/mUciM4I37aN3lbC6ecIo?p=preview if you click on Porsche, the bottom section says "Car color is red." but the dropdown menu doesn't select red.

Answer 1

In your example you are using window.setTimeout, so the options in the select won't even be updated. To get it to work with window.setTimeout you need to wrap the content in an $apply:

window.setTimeout(function() {
  $scope.$apply(function () {
    $scope.colors = [
      {code: "#ff0000", name: "red"},
      {code: "#0000ff", name: "blue"},
      {code: "#00ff00", name: "green"}];
  }, 100);
});

or you can use the $timeout service and skip the $apply:

$timeout(function() {
  $scope.colors = [
    {code: "#ff0000", name: "red"},
    {code: "#0000ff", name: "blue"},
    {code: "#00ff00", name: "green"}];
}, 100);

But as you said that you are using an Ajax call, I doubt this is your real problem (unless you are not using the $http service).

After these changes the select in your example still won't select the color correctly. This is because the equality of the color object in ng-model="car.color" and the objects in $scope.colors are evaluated by reference. So for it to work they need to refer to the same objects.

A working version of your example: http://plnkr.co/edit/Nx9nPYMDgPCSVWpOrQoV?p=preview