ng-bind-html and ng-model together in select dropdown

See more:

AngularJs

Hi Friends,
I have JSON file as below

var LocationList = [
{"id":1,"value":"ABC"},
{"id":2,"value":"XYZ"},
.
.
.
]

I'm trying to dynamically populate dropdown on my HTML as below

Angular Code:

.factory('locationService', function($filter){
         
         var Location = {};
         Location.Template = "";
         
         Location.getLocation = function(){
         
            var template = '<option direction="ltr" value="" id="theOption2">' + $filter('translate')('lSummary_Location_text') + '</option>';

            LocationList.forEach(function(loc){
                             var value = loc.value + ' / ID: ' + loc.id;
                             template += '<option direction="ltr" value="' + value + '">' + loc.value + '</option>';
                          });
         
            Location.Template = template;
         },
         Location.getTemplate = function(){
            return Location.Template;
         }
         
         return Location;
         
         })

.controller('secondInfoCtrl',function($scope, locationService, $sce){
$scope.locationList =$sce.trustAsHtml(locationService.getTemplate());

//RETURNS THE DATA FROM LOCAL STORAGE
$scope.Location = SecondScreenService.getInfo();
})

HTML:

<select id="location" ng-model="Location.location" ng-bind-html="locationList"></select>

Problem:
When I select an option from dropdown and move to next page and come back again to same page, ng-model is not working. Expected behavior is that the dropdown should be set to the value selected by the user, but the dropdown shows 1 option as selected.

If I'm not wrong, ng-model runs before ng-bind-html, so if the dropdown is not populated how the value will be selected.

Is there any way to delay ng-model, so that the list gets populate first and binding happens after that.

Thanks in advance