title: AngularJS ng-change on select with custom directive
body: <p>In my application I have a custom directive with select tag.</p>
  <pre><code>&lt;div class=&quot;row pv10&quot; ng-if=&quot;item.visible&quot;&gt;
    &lt;div class=&quot;col-xs-4 text-danger&quot;&gt;&lt;span ng-if=&quot;item.label_visible&quot;&gt; {{item.label}}&lt;/span&gt;&lt;/div&gt;
       &lt;div class=&quot;col-xs-8&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-xs-1&quot;&gt;
              &lt;select ng-options=&quot;oneItem for oneItem in item.options&quot; ng-model=&quot;selectedItem&quot; ng-change=&quot;changeEvent()&quot;&gt;
                  {{selectedItem | json}}
              &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I would like to perform an  action on every change event. I thought of using ng-change, which btw. worked just fine with radioBtn/checkBox. I tried two approaches here.</p>
  <p>Firstly I tried to pass &quot;changeEvent&quot; function to the directive's isolated scope.</p>
  <pre><code>&lt;custom-select item='item' change-event=&quot;change()&quot; ng-if=&quot;item.component == 'select'&quot; /&gt;
  </code></pre>
  <p>changeEvent() function exists in current controller (attached to the view holding custom-select)</p>
  <pre><code>scope: {
          item: &quot;=&quot;,
          changeEvent: &quot;&amp;&quot;
      }
  </code></pre>
  <p>Sadly expression does not evaluate on change.
  Secondly I tried to attach the function directly to directive</p>
  <pre><code>link: function ($scope, elems, attrs) {
          $scope.changeEvent = function () {
              alert(&quot;Change Event!&quot;);
          }
      }
  </code></pre>
  <p>but it didn't work either.</p>
  <p>I read somewhere  that ng-change even used within a custom directive operates on a controllers scope, not isolated scope of directive. However am not quite sure about that.
  I'd really appreciate your help.</p>
  <h2>EDIT!</h2>
  <p>This is a JSFiddle to the directive I use. If I should provide more details, just let me know, this is the first time I've ever used jsfiddle.</p>
  <p>This is how the directive is invoked:</p>
  <pre><code>&lt;div class=&quot;row&quot; ng-repeat=&quot;item in jsonData&quot;&gt;
    &lt;div class=&quot;col-xs-12&quot;&gt;   
      &lt;cbp-select item='item' change=&quot;change()&quot; ng-if=&quot;item.component == 'select'&quot; /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/60nsfg0L/" rel="nofollow noreferrer">https://jsfiddle.net/60nsfg0L/</a></p>
  <h2>EDIT2</h2>
  <p>When I have uploaded my solution to our local server it started to work properly.(Yes, I cleaned browser's cash, and my locals wamp/iss cache too).
  But now I have a different problem.
  I have a form built from different directives(like the one above), all have ng-click/change/blur. Everything seems to work fine until I change one of the options in my &quot;select&quot; directive. After selecting one of the values, ng-change expression is triggered (for not its just a simple alert) and from that moment onwards am not able to focus on any other elements. Weirdly enough, if I cause ng-change to trigger on any other element be it radiobtn or checkbox this problem does not occur.</p>