ng-change function Calling on-load before selecting

Question

Calling ng-change="changeStudentStatus();" function on-load, before selecting options.

<md-select ng-model="ctrl.newStudentStatus" ng-change="changeStudentStatus();" ng-if="ctrl.studentStatusList" >
   <md-option class="ss-options" ng-value="item.display_name" ng-repeat="item in ctrl.studentStatusList" ng-selected="item.id == ctrl.statusId">{{item.display_name}}</md-option>
</md-select> 

Script :

$scope.changeStudentStatus = function(){
     //some logic  
};

it should Call when use change the DropDown. whats wrong in my script

Answer 1

Its calling the changeStudentStatus() eveytime the page loading before select the options.

<md-select ng-model="ctrl.newStudentStatus" ng-change="changeStudentStatus();" ng-if="ctrl.studentStatusList" >
   <md-option class="ss-options" ng-value="item.display_name" ng-repeat="item in ctrl.studentStatusList" ng-selected="item.id == ctrl.statusId">{{item.display_name}}</md-option>
</md-select> 

i just resolved the issue with temporary solution, i have to call changeStudentStatus only when user changed the values, so i am creating a temporary variable and storing the earlier value, can performing the logic only when values is changed.

Script:

$scope.newValue  =ctrl .newStudentStatus;
        $scope.changeStudentStatus = function(){
              if($scope.oldVlaue === $scope.newValue)
              {
                //some logic  
              }
        };

Answer 2

Change

ng-change="changeStudentStatus();" 

to

ng-change="ctrl.changeStudentStatus();"

The difference is that in your code, you call a method that is called changeStudentStatus(). This method isn't available on the controller.

I assumed that you alliased your controller as ctrl since your other methods/properties are being called with ctrl.*

When you call the method ctrl.changeStudentStatus() you actually call the method that is set on your controller.

Answer 3

The ng-change expression will be automatically evaluated when you use the method ngModelCtrl.$setViewValue.

angular.module("myApp").directive("mdselect", function(){  return {
require:"^ngModel", // this is important, 
scope:{      ... // put the variables you need here but DO NOT have a variable named ngModel or ngChange 
}, 
link: function(scope, elt, attrs, ctrl){ // ctrl here is the ngModelCtrl
  scope.setValue = function(value){
    ctrl.$setViewValue(value); // this line will automatically eval your ng-change
  };
}};});

Answer 4

I solved by doing this:

    $scope.changeStudentStatus = function(){
          if($scope.ctrl.newStudentStatus)
          {
            //some logic  
          }
    };