Material: mdSelect : $scope.$watch() not working on ng-model of mdSelect

Created on 28 Feb 2015  路  12Comments  路  Source: angular/material

$scope.$watch only runs first time.

<md-select ng-model="neighborhood" placeholder="Select Stats">
          <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
</md-select>
$scope.neighborhoods = ['Chelsea sdsf','Chelsea asdas','Chelsea asd','Chelsea d', 'Chelsea', 'Financial District', 'Midtown', 'West Village', 'Williamsburg', 'Select Stats'];
    $scope.neighborhood = 'Select Stats';

    $scope.$watch('neighborhood', function(){
      console.log('TEST ...');
    });

Most helpful comment

I just updated my version and problem is still remain.

Its a scope issue. if i change the option the value update on template but not on controller.

<md-select ng-model="neighborhood" placeholder="Select Stats">
          <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
</md-select>
{{neighborhood}}

ng-model referencing directive scope.

But dot notation is working for me and here is quick solution if any other have same issue :

$scope.select = {neighborhood : ""};
$scope.$watch('select.neighborhood', function(){
      console.log('TEST ...');
    });

<md-select ng-model="select.neighborhood" placeholder="Select Stats">
          <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
</md-select>

All 12 comments

This appears to be working fine for me on master. I suspect you might be using an older version. If not, please submit a fiddle/codepen demonstrating the issue on master.

I just updated my version and problem is still remain.

Its a scope issue. if i change the option the value update on template but not on controller.

<md-select ng-model="neighborhood" placeholder="Select Stats">
          <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
</md-select>
{{neighborhood}}

ng-model referencing directive scope.

But dot notation is working for me and here is quick solution if any other have same issue :

$scope.select = {neighborhood : ""};
$scope.$watch('select.neighborhood', function(){
      console.log('TEST ...');
    });

<md-select ng-model="select.neighborhood" placeholder="Select Stats">
          <md-option ng-value="opt" ng-repeat="opt in neighborhoods">{{ opt }}</md-option>
</md-select>

Here is it working with the html you described. Closing for now. If the issue persists, please re-open a new issue with a plunker/jsfiddle/codepen demoing the problem.

Well here it is with the problem... http://jsfiddle.net/j1z8v5ss/1/ Still happening to me on 1.3.7

@sxasraf the demo you linked me works as expected. What's your browser / OS info?

fails for me too chrome latest

This issue should be reopened as I am having trouble with getting watch to fire for md-select after the first time on OS X Safari.

should be re-opened.

Same here, it binds on HTML but my $watch is not fired up.
Not sure if the $watch fires up when you push something to an array.

The fiddle's are working for me. But I use a form with ngFlow which is a file upload component. If I put the md-select inside an ngFlow directive it doesn't work anymore. I'm not sure if it's specific to ngflow or that it's due to a sub scope.

I also encountered the problem - it's working now for me if I put a watch on an object property (select.neighborhood) instead of a primitive (neighborhood). Sounds like a normal and known scope inheritance thing and not really a bug of md-select.

Here is my solution to this:

Watcher is not working with this:

Js:

$scope.your_age = 0;

$scope.$watch('your_age', function (newValues, oldValues, scope) {
        $scope.executeCalculations();
    });

Html:

<md-select placeholder="Age is between 16 - 69" ng-model="your_age">
                                    <md-option value="0">Under 16</md-option>
                                    <md-option value="1">Between 16 - 69</md-option>
                                    <md-option value="2">Between 69 - 78</md-option>
                                    <md-option value="3">Above  79</md-option>
                                </md-select>

But it's working well with this:

Js:

$scope.your_age = {
input : 0;
};

$scope.$watch('your_age.input', function (newValues, oldValues, scope) {
        $scope.executeCalculations();
    });

Html:

<md-select placeholder="Age is between 16 - 69" ng-model="your_age.input">
                                    <md-option value="0">Under 16</md-option>
                                    <md-option value="1">Between 16 - 69</md-option>
                                    <md-option value="2">Between 69 - 78</md-option>
                                    <md-option value="3">Above  79</md-option>
                                </md-select>

Just modify your model as seen above, and it will work.

I hope it helps.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

LeoLozes picture LeoLozes  路  3Comments

nikhildev picture nikhildev  路  3Comments

ddimitrop picture ddimitrop  路  3Comments

bobber205 picture bobber205  路  3Comments

PeerInfinity picture PeerInfinity  路  3Comments