title: How to bind dropdown control in edit mode?
body: <p>I am having a list of country along with its corresponding states.</p>
  
  <p>Now i want to bind the country and state value in dropdown control when open in edit mode.</p>
  
  <p>This is the fiddler link:    </p>
  
  <p><a href="http://jsfiddle.net/mariapithia/4yj8rprp/9/" rel="nofollow">http://jsfiddle.net/mariapithia/4yj8rprp/9/</a></p>
  
  <pre><code>     &lt;tr data-ng-repeat="friend in friends"&gt;
                          &lt;td&gt;&lt;strong&gt;{{ friend.Id }}&lt;/strong&gt;&lt;/td&gt;
                          &lt;td&gt;
                          &lt;p data-ng-hide="friend.editMode"&gt;{{ friend.firstname}}&lt;/p&gt;
                          &lt;input data-ng-show="friend.editMode" type="text" data-ng-model="friend.firstname" /&gt;
  
  
                          &lt;/td&gt;
                          &lt;td&gt;
                          &lt;p data-ng-hide="friend.editMode"&gt;{{ friend.lastname}}&lt;/p&gt;
                          &lt;input data-ng-show="friend.editMode" type="text" data-ng-model="friend.lastname" /&gt;
  
                          &lt;/td&gt;
  
                        &lt;td&gt;
                        &lt;p data-ng-hide="friend.editMode"&gt;{{ friend.Country.Name }}&lt;/p&gt;
                            @*How do i use select here for dropdown for binding country name in my dropdown*@
                  @*&lt;select data-ng-show="friend.editMode"&gt;
                      &lt;option value=""&gt;-- Select Country --&lt;/option&gt;
                   &lt;/select&gt;  *@
                          &lt;/td&gt;
                          &lt;td&gt;
                         &lt;p data-ng-hide="friend.editMode"&gt;{{friend.State.Name }}&lt;/p&gt;
  @*How do i use select here for dropdown for binding state name in my dropdown*@
                  @*&lt;select data-ng-show="friend.editMode"&gt;
                      &lt;option value=""&gt;-- Select State--&lt;/option&gt;
                   &lt;/select&gt;  *@
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;p &gt;&lt;a data-ng-click="toggleEdit(friend)" href="javascript:;"&gt;Edit&lt;/a&gt; | &lt;a data-ng-click="deletefriend(friend)" href="javascript:;"&gt;Delete&lt;/a&gt;&lt;/p&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Like i have use textbox for displaying firstname and lastname.sameway i would like to use dropdown for displaying my country name and state name in dropdown and allow user to select other country and state too from dropdown if user wants to select</strong>.</p>
  
  <p>I have taken code from this link with slight addition of fields:
  <a href="http://www.c-sharpcorner.com/uploadfile/raj1979/crud-operations-in-mvc-5-using-webapi-with-angularjs/" rel="nofollow">http://www.c-sharpcorner.com/uploadfile/raj1979/crud-operations-in-mvc-5-using-webapi-with-angularjs/</a></p>