Click here to Skip to main content
15,744,500 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Friends,
I have JSON file as below
var LocationList = [

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>';

                             var value = loc.value + ' / 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());

$scope.Location = SecondScreenService.getInfo();

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

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

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900