Scenario: I need to display a list of data in SELECT tag using AngularJS. Since AngularJS allows two way data binding, I want it to behave as it without extra effort. Here is the approach that I did.

```
Model
 public class Department
    {
        public int? DepartmentId { get; set; }
        public string DepartmentName { get; set; }
    }

Query to get the data

 Departments = user.Departments.Select(x=> new Department {DepartmentId= x.UserID,DepartmentName= x.FirstName}).OrderByDescending(x=>x.DepartmentName)

```

Assign data to $scope

```
 $scope.loadData = function () {
                $http.get(baseurl.resolve("~/api/users/getbyid?userId=" + userId)).success(function (data) {
                    $scope.DepartmentID = data.DepartmentID;
                    $scope.profile = data;
                });
            };

```

Event when value is change in SELECT

```
   $scope.selectDepartment = function (selectedDepartment) {
        $scope.profile.DepartmentID = selectedDepartment;
    };

```

Binding data to UI

```
          <select data-ng-model="DepartmentID" data-ng-selected="0" data-ng-change="selectDepartment(DepartmentID)" data-ng-options="department.DepartmentId as department.DepartmentName for department in profile.Departments">

```

This seems not a vanilla approach, I need to set this one `$scope.profile.DepartmentID = selectedDepartment;` for me to get the selected value. Is there a proper approach just to update the value in another way around?