equating variables which are coming from http calls

Question

I have a select tag with options populated by AngularJS. I am trying to select an option if it equals to another property in scope. Option values and scope property I am trying to compare are both coming from async http call. So there is always delay, then it is not working properly. What is the best practice to make sure that both scope property are resolved and ready to compare.

ng-selected="MusteriId == option.Value" is comparing part.

<select id="MusteriId" name="MusteriId" ng-model="MusteriId">
    <option ng-selected="MusteriId == option.Value"
            ng-repeat="option in MusteriList" value="{{option.Value}}">
      {{option.Text}}
    </option>
</select>

This is my controller where two http calls are performed.

(function() {
var biletController = function ($scope, $http, commonFunctions) {

    $scope.Id = null;
    $scope.BiletNo = null;
    $scope.BiletTarihi = null;
    $scope.CurrencyId = null;
    $scope.MusteriId = null;
    $scope.PAID_EUR = null;
    $scope.PAID_TL = null;
    $scope.PAID_USD = null;
    $scope.ServisIstiyorMu = null;
    $scope.TOTAL = null;
    $scope.TourId = null;

    $scope.MusteriList = null;

    $scope.openEditFormJS = function(e) {
        $http.get('/Bilet/Get/' + e)
            .then(function (response) {

                console.log(response.data);

                $scope.Id = response.data.Id;
                $scope.BiletNo = response.data.BiletNo;

                if (response.data.BiletTarihi) {
                    $scope.BiletTarihi = commonFunctions.formatDate(new Date(parseInt(response.data.BiletTarihi.substr(6))));
                }

                $scope.CurrencyId = response.data.CurrencyId;
                $scope.MusteriId = response.data.MusteriId;
                $scope.PAID_EUR = response.data.PAID_EUR;
                $scope.PAID_TL = response.data.PAID_TL;
                $scope.PAID_USD = response.data.PAID_USD;
                $scope.ServisIstiyorMu = response.data.ServisIstiyorMu;
                $scope.TOTAL = response.data.TOTAL;
                $scope.TourId = response.data.TourId;

                $('#modal').modal('show');

            });

        $http.get('/Bilet/GetMusteriSelectList')
            .then(function (response) {

                console.log(response.data);
                $scope.MusteriList = response.data;
            });
    };

};

app.controller('BiletController', ['$scope', '$http', 'commonFunctions', biletController]);
}());

Answer 1

Use the ng-value directive for non-string values¹

<select id="MusteriId" name="MusteriId" ng-model="MusteriId">
    <option ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶M̶u̶s̶t̶e̶r̶i̶I̶d̶ ̶=̶=̶ ̶o̶p̶t̶i̶o̶n̶.̶V̶a̶l̶u̶e̶"̶
            ng-repeat="option in MusteriList" ng-value="option.Value">
      {{option.Text}}
    </option>
</select>

For more information, see Using ngValue to bind the model to an array of objects

---

Don't use ngSelected with ngModel²

<select id="MusteriId" name="MusteriId" ng-model="MusteriId">
    <option ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶M̶u̶s̶t̶e̶r̶i̶I̶d̶ ̶=̶=̶ ̶o̶p̶t̶i̶o̶n̶.̶V̶a̶l̶u̶e̶"̶
            ng-repeat="option in MusteriList" value="{{option.Value}}">
      {{option.Text}}
    </option>
</select>

From the Docs:

Note: ngSelected does not interact with the <select> and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.

— AngularJS ng-selected API Reference

See additional Docs:

• Using ng-repeat to generate select options
• Using select with ng-options and setting a default value

See Stackoverflow:

• Using ng-repeat to generate select options (with Demo)

---