AngularJS - How to create dynamic drop down list

Requirement
The "區局代號" drop down list in this page should generate dynamically from database

The sql statement is as bellows:

1:  select UID, NAME   
2:  from UAA001V1   
3:  where ORGCD = 'cht12345' and UID <> '957500';  

And expected to retrieve two records

How to do it
[Step1] Create an value object class to store the result.

1:  /**  
2:   *   
3:   */  
4:  package gov.nta.nss.dto;  
5:  import java.io.Serializable;  
6:  // TODO: Auto-generated Javadoc  
7:  /**  
8:   * The Class UAA001V1Bean.  
9:   */  
10:  public class UAA001V1Bean implements Serializable {  
11:    private static final long serialVersionUID = -7541446851729769394L;  
12:    // 機關代號  
13:    private String uid;  
14:    // 機關名稱  
15:    private String name;  
16:    /**  
17:     * Gets the uid.  
18:     *   
19:     * @return the uid  
20:     */  
21:    public String getUid() {  
22:      return uid;  
23:    }  
24:    /**  
25:     * Sets the uid.  
26:     *   
27:     * @param uid  
28:     *      the uid to set  
29:     */  
30:    public void setUid(String uid) {  
31:      this.uid = uid;  
32:    }  
33:    /**  
34:     * Gets the name.  
35:     *   
36:     * @return the name  
37:     */  
38:    public String getName() {  
39:      return name;  
40:    }  
41:    /**  
42:     * Sets the name.  
43:     *   
44:     * @param name  
45:     *      the name to set  
46:     */  
47:    public void setName(String name) {  
48:      this.name = name;  
49:    }  
50:    /**  
51:     * {@inheritDoc}  
52:     */  
53:    @Override  
54:    public String toString() {  
55:      return "UAA001V1Bean [uid=" + uid + ", name=" + name + "]";  
56:    }  
57:  }  

[Step2] Create a controller class, and do query to return a List of UAA001V1Bean

1:  /**  
2:   *   
3:   */  
4:  package gov.nta.nss.web.rest;  
5:  import gov.nta.nss.Messages;  
6:  import gov.nta.nss.dto.UAA001V1Bean;  
7:  import gov.nta.nss.service.Nss702rService;  
8:  import gov.nta.nss.web.dto.Nss702r;  
9:  import java.util.List;  
10:  import org.apache.commons.collections.CollectionUtils;  
11:  import org.slf4j.Logger;  
12:  import org.slf4j.LoggerFactory;  
13:  import org.springframework.beans.factory.annotation.Autowired;  
14:  import org.springframework.http.MediaType;  
15:  import org.springframework.stereotype.Controller;  
16:  import org.springframework.web.bind.annotation.RequestBody;  
17:  import org.springframework.web.bind.annotation.RequestMapping;  
18:  import org.springframework.web.bind.annotation.RequestMethod;  
19:  import org.springframework.web.bind.annotation.ResponseBody;  
20:  import com.cht.commons.web.Alerter;  
21:  /**  
22:   *   
23:   */  
24:  @Controller  
25:  @RequestMapping("NSS702R/rest/")  
26:  public class Nss702rResouce {  
27:    private final static Logger LOG = LoggerFactory.getLogger(Nss702rResouce.class);  
28:    @Autowired  
29:    private Nss702rService nss702rService;  
30:    /**  
31:     * Gets the uaa001v1 beans.  
32:     *   
33:     * @return the uaa001v1 beans  
34:     */  
35:    @RequestMapping(method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)  
36:    public @ResponseBody  
37:    List<UAA001V1Bean> getUaa001v1Beans(@RequestBody Nss702r nss702r, Alerter alerter) {  
38:      // find all 區局代號 list  
39:      List<UAA001V1Bean> uaa001v1Beans = nss702rService.getUaa001v1Beans();  
40:      LOG.info("uaa001v1Beans=" + uaa001v1Beans.toString());  
41:      // if List of UAA001V1Bean is empty, return "找不到區局代號"  
42:      if (CollectionUtils.isEmpty(uaa001v1Beans)) {  
43:        alerter.info(Messages.nss702r_dpno_not_exist());  
44:      }  
45:      return uaa001v1Beans;  
46:    }  
47:  }  

[Step3] js file (only includes code snippet)

1:       //......................  
2:      //query  
3:      $scope.query = function(){  
4:        var result = nss702rService.query('rest/', $scope.model);  
5:        result.then(function(response){  
6:         $scope.dpNos = response;   
7:       });  
8:      };  
9:      $scope.refresh = function(){  
10:        $scope.query();  
11:      };  
12:      $scope.refresh();  
13:            //......................  

[Step4] html file  (only includes code snippet)

1:           <div class="form-group col-sm-5">  
2:            <label class="control-label">區局代號 :</label>  
3:            <select class="form-control" style="width: 80%;"  
4:                id="dpNo" name="dpNo" data-ng-model="model.dpNo"  
5:                data-ng-options="dpNo.uid as dpNo.name for dpNo in dpNos">  
6:            </select>  
7:           </div>  

Check the result