I'm running into a strange error but maybe I am using md-select incorrectly. I am trying to go to a new page or sign out based on the ng-selected option. Unfortunately, I am receiving this error:

Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

html:

<md-select placeholder="DISRUPTIVE" ng-model="activePage" ng-change="changeSelected()">
   <md-option value="settings">Settings</md-option>
   <md-option value="logout">Sign Out</md-option>
 </md-select>

controller:

$scope.changeSelected = function(){
      switch ($scope.activePage) {
      case "settings":
        $location.path( '/account');
        break;
      case "logout":
        $scope.logout();
        break;
    }

    };

After navigating to the selected page or logging out I receive the error. Can md-select not be used this way?

Edit: It's somehow related to leaving the page without letting md-select finish. If I add a $timeout it works. It's not ideal but at least I can move forward:

$scope.changeSelected = function(){
      $timeout(function() {
        switch ($scope.activePage) {
        case "settings":
          $location.path( '/account');
          break;
        case "logout":
          Auth.logout();
          break;
      }
    }, 1000);

I'm running into a strange error but maybe I am using md-select incorrectly. I am trying to go to a new page or sign out based on the ng-selected option. Unfortunately, I am receiving this error:

Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

html:

<md-select placeholder="DISRUPTIVE" ng-model="activePage" ng-change="changeSelected()">
   <md-option value="settings">Settings</md-option>
   <md-option value="logout">Sign Out</md-option>
 </md-select>

controller:

$scope.changeSelected = function(){
      switch ($scope.activePage) {
      case "settings":
        $location.path( '/account');
        break;
      case "logout":
        $scope.logout();
        break;
    }

    };

After navigating to the selected page or logging out I receive the error. Can md-select not be used this way?

Edit: It's somehow related to leaving the page without letting md-select finish. If I add a $timeout it works. It's not ideal but at least I can move forward:

$scope.changeSelected = function(){
      $timeout(function() {
        switch ($scope.activePage) {
        case "settings":
          $location.path( '/account');
          break;
        case "logout":
          Auth.logout();
          break;
      }
    }, 1000);

• javascript
• angularjs
• angular-material

• Oh, I added an answer but was for your preview post, not for this one... You should create new post instead of changing the issue completely – Eylen Commented Apr 16, 2015 at 20:27
• mmm, I don't think that ng-selected should be used in that way, try changing it for ng-change – Eylen Commented Apr 16, 2015 at 20:29
• Sorry for the change. I still generally have the same issue as it appears what I am doing is not correct. Can I use md-select as a way to sign-out and change pages? – EmptyPockets Commented Apr 16, 2015 at 20:32
• have you also deleted the parameter that you are sending to ng-change changeSelected function? And use $scope.activePage instead – Eylen Commented Apr 16, 2015 at 20:36
• 1 Was any other solution found? Changing state using ui-router, I was getting the error: "Cannot read property 'selectedLabels' of undefined". Problem is, md-select is attempting to call an "announceClosed()" function and it's finding the md-select's controller to be 'undefined'. I believe the problem is the controller has already been disposed in "redirecting". I used the timeout function but I want to avoid timeout's (especially because this has to run inside a very lackluster Silverlight browser control that doesn't manage memory very well) – Nexxas Commented Sep 9, 2016 at 14:22

1 Answer 1

To listen to changes on the select you just need to add an ng-change directive. Check this simple example

<div ng-app="selectDemoBasic" ng-controller="AppCtrl" layout="column" layout-align="center center" style="min-height: 300px;">
  <md-select placeholder="Pick" ng-model="someVal" ng-change="selectChanged()">
    <md-option value="1">One</md-option>
    <md-option value="2">Two</md-option>
  </md-select>
</div>

the js part

angular.module('selectDemoBasic', ['ngMaterial']).controller('AppCtrl', function($scope) {
  $scope.selectChanged = function(){
    alert("value changed-->"+$scope.someVal);
    if ($scope.someVal==1){
      $scope.otherFunction();
    }
  };

  $scope.otherFunction = function(){
    alert("in the other function");
  };
});

http://codepen.io/Eylen/pen/dobbqg/