Html select not updating on ng-model

[Bob]

Hi

I have a user form, In that there is user level combo (select). In the submit button I'm getting all  the data from ng-model, expect combo box value. I'm adding the code below.

HTML

<form name="uDetails" novalidate ng-submit="uDetailsForm()">

            <div class="row">

                <div class="col-md-3">

                    <div class="form-group">

                        <label>User Code</label><input id="UserCode" type="text" name="UserCode" class="form-control" placeholder="User Code" value="" ng-model="UserModel.UserCode" ng-class="Submited?'ng-dirty':''" required autofocus>

                        <div class="alert alert-danger" ng-show="(uDetails.UserCode.$dirty || Submited) && uDetails.UserCode.$error.required">User code should not blank</div>

                    </div>

                </div>

                <div class="col-md-9">

                    <div class="form-group">

                        <label>User Name</label><input id="UserName" type="text" name="UserName" class="form-control" placeholder="User Name" value="" ng-model="UserModel.UserName" required autofocus>

                        <div class="alert alert-danger" ng-show="(uDetails.UserName.$dirty || Submited) && uDetails.UserName.$error.required">User name should not blank</div>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-3">

                    <div class="form-group">

                        <label>Password</label><input id="Password" type="password" name="Password" class="form-control" placeholder="Password" value="" ng-model="UserModel.Password" required autofocus>

                        <div class="alert alert-danger" ng-show="(uDetails.Password.$dirty || Submited) && uDetails.Password.$error.required">Password should not blank</div>

                    </div>

                </div>

                <div class="col-md-3">

                    <div class="form-group">

                        <label>Confirm Password</label><input id="ConfirmPassword" type="Password" name="ConfirmPassword" class="form-control" placeholder="Confirm Password" value="" ng-model="UserModel.ConfirmPassword" autofocus required nx-equal="UserModel.Password"> <!--ng-patten="{{UserModel.Password}}"-->

                        <div class="alert alert-danger" ng-show="(uDetails.ConfirmPassword.$dirty || Submited) && uDetails.ConfirmPassword.$error.nxEqual">Password and confirm password must be same</div>

                    </div>

                </div>

                <div class="col-md-5">

                    <div class="form-group">

                        <label>User Level</label>

                        <div class="form-group">

                            <select class="form-control" id="UserLevel" name ="UserLevel" ng-init="UserLevel = UserLevels[0].UserLevelNumber" ng-model="UserModel.UserLevel" ng-options="UserLevel.UserLevelNumber as UserLevel.UserLevelName for UserLevel in UserLevels"></select><!--UserLv.UserLevelName for UserLv in UserLevelsTest track by UserLv.UserLevelNumber-->

                        </div>

                    </div>

                </div>

                {{UserModel.UserLevel}}

                <div class="col-md-1">

                    <div class="form-group">

                        <label>Status</label>

                        <div class="form-group">

                            <img src="/images/acti_med.png" class="img-responsive imheight" alt="" usemap="#act_map"/>

                            <map name="act_map">

                              <area shape="rect" coords="43,0,85,40" href="">

                            </map>

                        </div>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-12">

                    <div class="form-group">

                        <label>Remark</label><textarea rows="3" id="Remarks" name="Remarks" class="form-control" placeholder="Remark" value="" ng-model="UserModel.Remarks" ></textarea>

                    </div>

                </div>

            </div>

            <button type="submit" class="btn btn-success btn-fill pull-right">Save</button>

            <button class="btn btn-danger btn-fill pull-right">Close</button>

            <div class="clearfix"></div>

        </form>

JS

myApp.controller("DetailCtrl", function ($scope, $http, LoginService) {

    

    $scope.IsFormValid = false;

    $scope.Submited = false;

    $scope.UserModel = {};

    $http({ // Get User Level List From Server

        method: 'POST',

        url: 'XXXXXXXX'

    }).then(function (success) {

        $scope.UserLevels = success.data;

        $scope.UserModel.UserLevel = success.data[0].UserLevelNumber;

    }, function (error) {

    });

    $scope.$watch("uDetails.$valid", function (TrueOrFalse) {

        $scope.IsFormValid = TrueOrFalse;   //returns true if form valid  

    });

    $scope.uDetailsForm = function () {

        $scope.Submited = true;

        if ($scope.IsFormValid) {

            console.log(JSON.stringify($scope.UserModel));

        }

    }

}).factory("UserDetailService", function ($http) {

    var fact = {};

    fact.getUserDetails = function (d) {

        debugger;

        return $http({

            url: 'XXXXXXX',

            method: 'POST',

            data: JSON.stringify(d),

            headers: { 'content-type': 'application/json' }

        });

    };

    return fact;

});

Output of this code is "console.log(JSON.stringify($scope.UserModel));"

{"UserLevel":2,"UserCode":"UC102","UserName":"uc...@example.com","Password":"123456","ConfirmPassword":"123456","Remarks":"Test 123456"}

Thank And Regards

Bobbin Paulose