Angularjs is not updating ng-model value when the value of dropdown/select is being changed

[Sandeep Kumar]

When i am changing my option value of select it's ng-model value is not being changed. Is this happening because of value is being changed by Jquery? Because i read a line about angularjs from w3school that The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.

And i want to clarify that option value is being changed by j query.

Please suggest me proper solution or tell me error in the code.

Here is my html

<div class="row" ng-app="myapp" ng-controller="mycontroller" id="mainController">

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="form-group">
            <p>Rooms
                <% no_of_rooms %>
            </p>
            <select ng-init="no_of_rooms='1'" autocomplete="off" ng-model="no_of_rooms" class="form-control" id="no_of_rooms" style='display:none' name="no_of_room" style="height: 39px !important;">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
            </select>
        </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" ng-repeat="i in getNumber(no_of_rooms) track by $index">
        <div class="form-group">
            <p>Adult (12+ YRS)</p>
            <select autocomplete="off" class="form-control" style='display:none' name="no_of_adults[]" style="height: 39px !important;">
                <option value="0">0</option>
                <option value="1" Selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>

        </div>
    </div>
</div>

Here is my script.

var app = angular.module('myapp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});
app.controller('mycontroller', function($scope , $filter) {
 $scope.getNumber = function(num) {
        return new Array(parseInt(num));   
    }
});

[Charul Chavda]

Hi,

The change detection system of Angularjs will not work if the change has happened from outside Angular’s ecosystem. Off course you can kick that change to happen manually but is not always recommended. Is there any reason you are not using jqlite which light version of jquery built into Angularjs.

Regards,

Charul

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/6fbb3d82-a99d-434d-a973-ffc6d3c22f6d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tito]

Look into ngoption and ngChange

[Tito]

https://docs.angularjs.org/api/ng/directive/ngOptions