title: Why ng-change is not working on a custom directive in angularjs
body: <p>I am working on a select directive that knows its repository and loads its data.
  this directive has a very simple template.</p>
  
  <pre><code>&lt;select&gt;&lt;/select&gt;
  </code></pre>
  
  <p>I have a compile function that adds a ng-options directive to our select.
  since the rendered element on the from is a select I expect that putting a ng-change directive on our element will call the related change function but it is called only once.Here's a code snippet that I made to share the code.</p>
  
  <p>Here is also a plunker version of same code :<a href="https://plnkr.co/edit/D8lErJWKZyrAeI6BZ7iJ" rel="nofollow noreferrer">https://plnkr.co/edit/D8lErJWKZyrAeI6BZ7iJ</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Code goes here
  
  var app = angular.module("myShoppingList", []); 
  app.controller("myCtrl",['$scope','productsRepository', function($scope,productsRepository) {
      $scope.products =productsRepository.getAll();
      $scope.selectdProduct={};
      $scope.onSelectedProductChanged=function(item){
        alert(item);
      }
  }]);
  
  app.service("productsRepository",[function(){
    return {
      getAll:function(){return [
        {
          id:1,title:'Milk'
        },
        {
          id:2,title:'Bread'
        },
        {
          id:3,title:'Cheese'
        }
        ]}
    }
  }]);
  
  app.directive("productsComboBox",['$compile','productsRepository',function($compile,productsRepository){
    return {
      restrict:'E',
      replace:true,
      template:'&lt;select&gt;&lt;/select&gt;',
      scope:{
        ngModel:'='
      },
      require:'ngModel',
      compile:function(elm,atts){
        elm.attr('ng-options','item.id as item.title for item in items' );
        var fn=$compile(elm);
        return function(scope,elm,atts){
          
            fn(scope);
            scope.items=productsRepository.getAll();
            console.log(scope.items);
        }
      }
    }
  }])</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="angular.js@*" data-semver="4.0.0" src="script.ts"&gt;&lt;/script&gt;
      &lt;script data-require="angular.js@*" data-semver="4.0.0" src="system.config.js"&gt;&lt;/script&gt;
      &lt;script data-require="angular.js@*" data-semver="4.0.0" src="tsconfig.json"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app='myShoppingList' ng-controller='myCtrl'&gt;
      &lt;ul&gt;
        &lt;li ng-repeat='product in products'&gt;{{product.title}}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;products-combo-box ng-model='selectdProduct' ng-change='onSelectedProductChanged(selectdProduct)'&gt;&lt;/products-combo-box&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>I have seen other question about the same problem but there's a difference between my problem and those questions. We don't have any root element in our template and thus ng=change is placed in our select and we can not define a ng-model for our select in our directive so that we can call the ng-change of the parent.</em></p>