ngModel doesn't bind to select option

Question

I can't figure out why i can't bind to a select element there is my code:

<select ng-model="site" ng-change="getAll()">
  <option value="SG1">SG1</option>
  <option value="PZ1">PZ1</option>
  <option value="NE1">NE1</option>
</select>

getAll() make an alert of 'site' but the var is never updated. $scope.site is nerver use except in getAll()

  $scope.getAll = function () {
    alert($scope.site);
  }

If i set $scope.site to a value it is display but never update either

Edit: I forgot a big detail... The select is display with a ng-include directive

<section id="sectionLeft" ng-include="nav[navId]">

</section>

@Sandroggy , add controller code as well. – Wasif Khan Jul 13 '17 at 09:53 — Wasif Khan, Jul 13 '17 at 09:53

Frank Modica · Accepted Answer · 2017-07-13T11:18:14.750

ng-include creates a new scope which prototypally inherits from your controller. So you are initially reading the selected option from your controller, but when the select element writes a new selected option it ends up writing to the inherited scope.

You can bind to an object instead.

Controller:

    $scope.data = { site: "SG1" };
    $scope.getAll = function() {
        alert($scope.data.site);
    }

Template:

    <select ng-model="data.site" ng-change="getAll()">
        <option value="SG1">SG1</option>
        <option value="PZ1">PZ1</option>
        <option value="NE1">NE1</option>
    </select>

See this answer for more details.

If you don't like switching to an object, look up controller as syntax and bind directly to the controller instead of $scope.

score 0 · Answer 2 · answered Jul 13 '17 at 09:55

0

I've fiddled your code and i'm able to get the updated value in the alert box.

$scope.getAll = function() {
    alert($scope.site);
};

Working Fiddle

answered Jul 13 '17 at 09:55

Arunkumar G

126
6

ngModel doesn't bind to select option

2 Answers2