Please see my plunkr below

This what my $scope.data looks like

$scope.data = [  
   {  
      "projectedStart":"2016-12-14T00:00:00"     
   },
   {  
      "projectedStart":"2017-01-04T00:00:00"      
   },
   {  
      "projectedStart":"2017-01-11T00:00:00"      
   }   
];

This is what my scope.possibleDates look like

$scope.possibleDates = [  
   {  
      "projectedStartDate":"2016-12-07T00:00:00",
      "dateName":"December - Week 1"
   },
   {  
      "projectedStartDate":"2016-12-14T00:00:00",
      "dateName":"December - Week 2"
   },
   {  
      "projectedStartDate":"2016-12-21T00:00:00",
      "dateName":"December - Week 3"
   },
   {  
      "projectedStartDate":"2016-12-28T00:00:00",
      "dateName":"December - Week 4"
   },
   {  
      "projectedStartDate":"2017-01-04T00:00:00",
      "dateName":"January - Week 1 (20/10)"
   },
   {  
      "projectedStartDate":"2017-01-11T00:00:00",
      "dateName":"January - Week 2 (20/10)"
   }
]

This is what my select looks like which is obviously wrong

<table class="table table-bordered table-hover">
   <thead>                  
      <tr>
        <th >Projected Date</th>
     </tr>
   </thead>
    <tbody>
        <tr ng-repeat="d in data">
            <td>
                <select class="form-control"
                            ng-model="selectedValue"
                            ng-init="selectedValue = {{data.projectedStart == dates.projectedStartDate}}"
                            ng-options="dates.dateName for dates in possibleDates">
                 </select>
            </td>
        </tr>                                               
    </tbody>
</table>

I am trying to display a dropdown with a list of all the $scope.possibleDates's dateName property which is fine, but I want to have selected the value that matches with the 'projectedStart' in $scope.Data

Please see my plunkr below

https://plnkr.co/edit/8xjmL9?p=preview

This what my $scope.data looks like

$scope.data = [  
   {  
      "projectedStart":"2016-12-14T00:00:00"     
   },
   {  
      "projectedStart":"2017-01-04T00:00:00"      
   },
   {  
      "projectedStart":"2017-01-11T00:00:00"      
   }   
];

This is what my scope.possibleDates look like

$scope.possibleDates = [  
   {  
      "projectedStartDate":"2016-12-07T00:00:00",
      "dateName":"December - Week 1"
   },
   {  
      "projectedStartDate":"2016-12-14T00:00:00",
      "dateName":"December - Week 2"
   },
   {  
      "projectedStartDate":"2016-12-21T00:00:00",
      "dateName":"December - Week 3"
   },
   {  
      "projectedStartDate":"2016-12-28T00:00:00",
      "dateName":"December - Week 4"
   },
   {  
      "projectedStartDate":"2017-01-04T00:00:00",
      "dateName":"January - Week 1 (20/10)"
   },
   {  
      "projectedStartDate":"2017-01-11T00:00:00",
      "dateName":"January - Week 2 (20/10)"
   }
]

This is what my select looks like which is obviously wrong

<table class="table table-bordered table-hover">
   <thead>                  
      <tr>
        <th >Projected Date</th>
     </tr>
   </thead>
    <tbody>
        <tr ng-repeat="d in data">
            <td>
                <select class="form-control"
                            ng-model="selectedValue"
                            ng-init="selectedValue = {{data.projectedStart == dates.projectedStartDate}}"
                            ng-options="dates.dateName for dates in possibleDates">
                 </select>
            </td>
        </tr>                                               
    </tbody>
</table>

I am trying to display a dropdown with a list of all the $scope.possibleDates's dateName property which is fine, but I want to have selected the value that matches with the 'projectedStart' in $scope.Data

• javascript
• angularjs

• Can you show your ng-repeat statement? – Ravi Shankar Bharti Commented Dec 15, 2016 at 3:20
• I've updated the question with the whole table so you can see the ng-repeat – aliaz Commented Dec 15, 2016 at 3:30

4 Answers 4

I dont think there is a need for defining a new model using ng-init and the way of usage is also wrong. You need to bind model which you want to update through the field. In this case it is projectedStart property of data array. So set that as your drop-down model. Now you need to set ng-option such that when dateName is selected, projectedStart property should go as value. The following code will be a good option for you.

<select class="form-control"
                        ng-model="d.projectedStart"
                        ng-options="dates.projectedStartDate as dates.dateName for dates in possibleDates">
                  </select>

I have updated the plunker - https://plnkr.co/edit/Hd2UBec1ULK6XQ2H26hC?p=preview

Just change your code to this:

<select class="form-control"
      ng-model="selectedValue">
  <option ng-repeat="dates in possibleDates" selected="{{d.projectedStart == dates.projectedStartDate}}">{{dates.dateName}}</option>
</select>

You don't need {{}} inside your ng-init since it is evaluated by Angular itself.

Also for an item to be selected you need to set the value to one of the dates, your evaluation sets the selectedValue to true or false.

I dont think you need to put {{}} inside ng-init expression. Also, you need to use d instead of data, as you have defined d in data in ng-repeat statement

Just try this :

ng-init = "selectedValue = (d.projectedStart == dates.projectedStartDate)"

I guess this will work for you.

Alternative :

you can try this in place of your select statement.

<select class="form-control" ng-model="selectedValue">
    <option ng-repeat="dates in possibleDates" ng-selected = "d.projectedStart == dates.projectedStartDate">dates.dateName</option>
</select>

<select class="form-control agentValue" style="padding: unset;" ng-model="selectedAgent[$index]" ng-change="setAgentID($index)">
    <option value="">Select Agent</option>
    <option ng-repeat="aList in agentlist" value="{{aList.LOGIN_ID}}">{{aList.FIRST_NAME}} {{aList.LAST_NAME}}</option>
</select>

this is the html code i have written (above is html)

for(var i= 0; i< $scope.datalist.length; i++){
    $scope.selectedAgent[i] = $scope.datalist[i].COLLECTION_AGENT_ID;
}

this my controller code this works fine for me