How to fix unexpected arguments passing from a fun

Question

http://plnkr.co/edit/fFSoLmPFDBfNc2oOczZr?p=preview

Directive code

.directive('inputSelect', function() {
        return {
          templateUrl: 'someTemplate.html',
          restrict: 'E',
          scope: {
            ngModel: '=',
            ngChange: '&',
            options: '='
          }
        };
      })

Controller code

  $scope.someFunction = function(name) {
            console.log(name)
          };
  $scope.colors = [{
        name: 'black',
        shade: 'dark'
      }, {
        name: 'white',
        shade: 'light',
        notAnOption: true
      }, {
        name: 'red',
        shade: 'dark'
      }];

Template code

<select ng-model="ngModel" ng-change="ngChange()" 
  ng-options="option.name for option in options">
</select>

Code for directive usage

<input-select ng-model="someModel" ng-change="someFunction(someModel.name)" options="colors"></input-select>

So, the arguments being passed to someFunction() is being undefined or it contains correct value, the behaviour is unexpected and random.

Answer 1

Your template should call a method by passing a parameter in JSON format like ng-change="ngChange({someModel: ngModel})" from directive

Make sure while calling function from directive you should pass parameter with the key should be function parameter name as here it is someModel and then pass the value like here its ngModel

Markup

<input-select ng-model="someModel" ng-change="someFunction(someModel)" options="colors"></input-select>

Directive template

<select ng-model="ngModel" ng-change="ngChange({someModel: ngModel})" 
  ng-options="option.name for option in options">
</select>

Working Plunkr