My drop down list not selected dynamically

Question

I have to select drop down list value dynamically for update functionality in my web site. I also go through similar tutorials and stack overflow question-answer.

I work with angularjs v1.4.2, up till now I tried below code.

HTML:

<label for="ddlDesignationDepartment"> Department</label>
<select name="ddlDesignationDepartment" ng-model="designation.DepartmentId" 
        ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId" >
</select>
<br/>
<label for="txtDesignationName"> Designation</label>
<input type="text" name="txtDesignationName"
       ng-model="designation.DesignationName"
       placeholder="Designation name"/>
<br/>
<label for="txtDescription"> Description</label>
<input type="text" name="txtDescription"
       ng-model="designation.Description"
       placeholder="Desription"/>

<input type="button" value="{{designation.DesignationId>0?'Update':'Insert'}}"
       ng-click="ManageDesignation(designation)" />

  <table name="tblDesignationResult">       
        <tbody ng-if="designationList.length>0">
            <tr ng-repeat="des in designationList">
                <td>
                    {{$index+1}}
                </td>
                <td >
                    {{des.DesignationName}}
                </td>
                <td>
                    {{des.Description}}
                </td>
                <td >
                    {{des.DepartmentName}}
                </td>               
                <td>
                    <input type="button" value="Edit" ng-click="EditDesgnation(des)" />
                </td>
            </tr>
        </tbody>
    </table>

AngularJs code:

(function () {
    'use strict';

    ///Decalre angular controllar for Designation
    angular.module('AngularDemo').controller('DesignationCtrl', ['$scope', '$rootScope', 'DesignationService', 'DepartmentService', DesignationCtrl]);

    ///Designation controllar
    function DesignationCtrl($scope, $rootScope, DesignationService, 
          DepartmentService) {
        ///Get or set all Designation
        $scope.designationList = [];

        ///Get or set all Department
        $scope.departmentList = [];



        ///Get or set Designation
        $scope.designation = new Designation();


        ///Retrive all Designation by  DesignationService
        $scope.GetAllDesignations = function () {
            DesignationService.GetAllDesignations().then(function (response) {
                if (response && response.data) {
                    /// Success block
                    if (response.data.Result) {
                        $scope.designationList = angular.copy(response.data.Result);
                    }
                    else {
                        alert(response.data.Message);
                    }
                }
            });
        }
        /// Manage Insert / Update / Delete on specific  Designation by  
        ///DesignationService
        $scope.ManageDesignation = function ( des) {
            DesignationService.ManageDesignation(des).then(function (response) {

                if (response && response.data) {
                    /// Success block
                    if (response.data.Result) {
                        $scope.departmentList = angular.copy(response.data.Result);
                    }
                    else {
                        alert(response.data.Message);
                    }
                }
            });
            $scope.Init();
        }

        ///Retrive all Department by  DepartmentService
        $scope.GetAllDepartments = function () {
            DepartmentService.GetAllDepartments().then(function (response) {
                if (response && response.data) {
                    /// Success block
                    if (response.data.Result) {
                        $scope.departmentList = angular.copy(response.data.Result);
                    }
                    else {
                        alert(response.data.Message);
                    }
                }
            });
        }

        ///Edit Designation
        $scope.EditDesgnation = function (des) {
            $scope.designation = des;
        }



        ///Inilise Designation controllar
        $scope.Init = function () {          
            $scope.designation = new Designation();
            $scope.GetAllDesignations();
            $scope.GetAllDepartments();


        }
    }


})();
///JavaScript Class of Designation
function Designation() {
     this.DesignationId = 0;
     this.DesignationName='';     
     this.Description = '';  
     this.DepartmentId = 0;
 }
 Designation.prototype = {
     constructor: Designation
 }

Sample Database

Department{DepartmentId int, DepartmentName varchar(max)}
Designation{DesignationId int,DesignationName varchar(max),Description varchar(max),DepartmentId int}

All services working fine, initially everything is fine all data are display in Result table, Dropdown list was also show all departments. But the problem is when I click on edit for update any record textbox value are filled for specific data but the Department Dropdown list value are not select.

Answer 1

Be careful when using select as and track by in the same expression. Given this array of items on the $scope:

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

This will work:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];

but this will not work:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;

In both examples, the track by expression is applied successfully to each item in the items array. Because the selected option has been set programmatically in the controller, the track by expression is also applied to the ngModel value. In the first example, the ngModel value is items[0] and the track by expression evaluates to items[0].id with no issue. In the second example, the ngModel value is items[0].subItem and the track by expression evaluates to items[0].subItem.id (which is undefined). As a result, the model value is not matched against any and the appears as having no selected value

so in your case as well change this ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId

to

ng-options="dept as dept.DepartmentName for dept in departmentList track by dept.DepartmentId

since dept[0].DepartmentId.id do not exists